настройка начального элемента начальной загрузки при выборе опции

Question

Я использую класс начальной загрузки bootstrap, чтобы сохранить согласованный стиль между вводом формы и тем, для которого требуется опция выбора. Однако использование начальной формы начальной загрузки на элементах выбора дает ему ужасную выпадающую кнопку в Firefox.

Чего бы я хотел достичь, так это

Однако, просматривая часть css, я не могу определить, какую часть мне следует переопределить, поскольку, похоже, нет css, указывающего оформление раскрывающейся стрелки.

Вот так выглядит текущий код

<div class="form-group row">
    <label for="industry" class="">Industry :</label>
    <select name="industry" class="form-control">
        <option value="" disabled selected>Select Industry</option>
        <option value="financial-service">Financial Services</option>
        <option value="healthcare-lifescience">Healthcare & Life Science</option>
        <option value="communications">Communications</option>
    </select>
</div>

Answer 1

Вы можете реализовать Chosen (плагин jQuery для выбора) в нем.Он имеет множество функций, а также вы можете легко его оформить.

Ссылка: https://harvesthq.github.io/chosen/

В вашем коде:

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css"
  />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
  <div class="form-group">
    <label for="industry" class="">Industry :</label>
    <select name="industry" id="industry" class="form-control chosen-select">
      <option value="" disabled selected>Select Industry</option>
      <option value="financial-service">Financial Services</option>
      <option value="healthcare-lifescience">Healthcare & Life Science</option>
      <option value="communications">Communications</option>
    </select>
  </div>
  <script>
    $("#industry").chosen();
  </script>

Answer 2

Проверьте мою ручку для вас. На 100% работает в Chrome, Firefox, Edge и Safari

отметьте эту кодовую ручку

select.customDropdown::-ms-expand {
    display: none;
}

select.customDropdown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    
    background : url("https://img.icons8.com/material/24/000000/sort-down.png") no-repeat right #fff;

    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<div class="jumbotron container">
  <div class="row">
  <div class="col-md-6 offset-md-3">
<div class="form-group row">
    <label for="industry" class="">Industry :</label>
    <select name="industry" class="form-control customDropdown">
        <option value="" disabled selected>Select Industry</option>
        <option value="financial-service">Financial Services</option>
        <option value="healthcare-lifescience">Healthcare & Life Science</option>
        <option value="communications">Communications</option>
    </select>
</div>
  </div>
  </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.js"></script>

Answer 3

Посмотрите класс custom-select для начальной загрузки, так как вам будет проще стилизовать элемент select, как вам нужно.

Однако есть оговорка, что поддержка стиля select / optionsдовольно ограничен.Если вы хотите получить полный контроль, вам нужно будет использовать сторонний пакет, чтобы преобразовать выбор в пользовательский выбор на основе html / javascript.

Answer 4

Проверьте -moz-appearance здесь и установите его на none.

По умолчанию браузеры, такие как Chrome, Firefox, ... применяют стиль к входам, выбору, раскрывающимся спискам и т. Д. Использование внешнего вида позволяет удалить этот стиль по умолчанию и применить свой собственный, используя псевдоэлементы (уже сделано в Bootstrap в ваш конкретный случай).