如何在 Bootstrap Select2 下拉菜单中为边框颜色应用 CSS

debugcn 发表于 Dev

阿南德

我正在使用 boostrap4。我正在尝试将以下 css 应用于 html 元素。

.req 
{
   border-left: 2px solid #FF6600;
}

它对输入元素工作正常，但不适用于 Select2 下拉元素。
请帮忙

安贾娜席尔瓦

Select2 Bootstrap 主题

对于 Select2 下拉主题，

像这样将 css 应用到 span，

<span class="select2-selection select2-selection--single form-control input-lg" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-e8ez-container" style="
border: 2px solid #FF6600;">

下拉菜单

对于下拉菜单，您需要将 css 类提供给按钮，请参见下面的示例，

HTML

<div class="dropdown">
        <button class="btn btn-default dropdown-toggle req" type="button" id="menu1" data-toggle="dropdown">Tutorials
          </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
        </ul>
      </div>

CSS

你的 css 小姐姐需要!important在里面。

.req 
{
  border-left: 2px solid #FF6600 !important;  
}

例子

https://codepen.io/anjanasilva/pen/WaMxBR

希望这可以帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-22

我来说两句

0条评论

登录后参与评论

来自分类Dev

如何在单击时使Bootstrap Select2下拉列表转到所选的URL？

来自分类Dev

如何在单击时使Bootstrap Select2下拉列表转到所选的URL？

来自分类Dev

如何在select2下拉菜单中换行？

来自分类Dev

当光标位于Bootstrap的下拉菜单中时，如何使下拉菜单的颜色变暗？

来自分类Dev

如何在Angular 2中使用Bootstrap CSS库？

来自分类Dev

Select2和Bootstrap 3 CSS问题

来自分类Dev

Select2和Bootstrap 3 CSS问题

来自分类Dev

为bootstrap-select / select2关闭自动对焦

来自分类Dev

如何在CSS中自定义下拉菜单？

来自分类Dev

如何在CSS中对齐导航下拉菜单？

来自分类Dev

如何在 CSS 中对齐下拉菜单

来自分类Dev

Select2：如何在 Select2 中获得自定义排序

来自分类Dev

如何在CSS中单击时创建类似边框的Bootstrap

来自分类Dev

如何将Bootstrap下拉样式应用于MVC剃刀中的下拉菜单

来自分类Dev

如何在select2中更改占位符？

来自分类Dev

如何在Select2中使用“标签”

来自分类Dev

如何在Select2中插入FontAwesome

来自分类Dev

如何在Select2中首先设置占位符

来自分类Dev

如何在litelement中实现select2

来自分类Dev

如何在 Laravel 中实现 select2

来自分类Dev

如何在Bootstrap的项目菜单中创建子菜单下拉菜单？

来自分类Dev

如何捕捉select2下拉菜单的宽度？

来自分类Dev

CSS或jQuery：<select>下拉菜单中的两种不同颜色的文本

来自分类Dev

无法在Bootstrap的select2插件中设置所选值

来自分类Dev

无法在Bootstrap的select2插件中设置选定的值

来自分类Dev

如何在 CSS flexbox 中使用 Angular 的 material2 下拉菜单？

来自分类Dev

如何从dom中删除select2

来自分类Dev

select2 multiselect下拉菜单

来自分类Dev

在AngularJS中使用Select2（带有MetroUI CSS）的依赖下拉菜单不起作用

Related 相关文章

文章