Как применить CSS для цвета границы в Bootstrap Select2 Dropdown

Question

Я использую boostrap4.Я пытаюсь применить ниже CSS к элементам HTML.

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

он работает нормально с элементами ввода, но не работает с выпадающим элементом Select2.
Пожалуйста, помогите

Answer 1

Select2 Bootstrap Theme

Для раскрывающейся темы 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

Надеюсь, это поможет.