如何在Bootstrap Select2 Dropdown中为边框颜色应用CSS

Question

我正在使用boostrap4。 我正在尝试将css下面的内容应用于html元素。

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

它可以很好地与输入元素配合使用，但不能与Select2下拉元素配合使用。
请帮助

Answer 1

Select2 Bootstrap主题

对于Select2下拉主题，

像这样将css应用于范围，

<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 lass需要包含!important。

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

示例

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

希望这会有所帮助。