Как изменить стиль метки optgroup блока выбора

Question

У меня есть простое поле выбора с группой опций в моем приложении.

<select>
   <optgroup label="Swedish Cars">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
 </optgroup>
  ----
  ----
  ----
</select>

Когда он отображается в браузере, метка группы параметров отображается жирным шрифтом и курсивом; Я хочу, чтобы он отображался без этих стилей.

Answer 1

В большинстве браузеров (протестировано на последних версиях IE и FF) вы можете легко изменить метку optgroup только с помощью CSS:

    select optgroup{
    background:#000;
    color:#fff;
    font-style:normal;
    font-weight:normal;
    }

Очевидно, вы можете установить любое имя класса вместо HTML-тега select.

Кстати, как уже говорилось в других ответах, по-прежнему мало вариантов CSS для использования с полями выбора, и многие веб-мастера переопределяют их, используя метод, предоставленный user949847.Но этого кода выше должно быть достаточно для удовлетворения ваших потребностей.

Answer 2

К сожалению, блоки выбора - это одна из немногих вещей, к которой вы можете добавить очень мало стиля в CSS Вы обычно ограничены тем, как его отображает браузер.

Например, в хроме это выглядит так:

И это в Firefox:

Answer 3

Firefox стилизует метку, используя это правило:

optgroup:before {
    content: attr(label);
    display: block;
}

Вы можете переопределить его.

Answer 4

<style>
.select2-container--bootstrap .select2-results__group {
    color: inherit;
    font-size: inherit;
    font-weight:bold;
    padding: 6px 4px;
}

Answer 5

Для другого подхода к обходу проблем со стилем optgroups я предлагаю использовать отключенные опции.

<option disabled>[group label]</option>

вы можете попробовать его стилизацию, например,

<style> [disabled] { color:#000; background-color:#CCC } </style>

Answer 6

Вы можете стилизовать поле выбора, используя только CSS, это требует некоторого обхода:

Сначала вы окружаете его div и присваиваете ему класс:

<div class="selectStyle">
    <select>
        <option>First Option</option>
        <option>Second Option</option>
    </select>
</div>

Затем убедитесь, что выбранные элементы стилизованы определенным образом, используя css:

.selectStyle select {
   background: transparent;
   width: 250px;
   padding: 4px;
   font-size: 1em;
   border: 1px solid #ddd;
   height: 25px;
}

И вы вводите div:

.selectStyle {
   width: 235px;
   height: 25px;
   overflow: hidden;
   background: url(yourArrow.png) no-repeat right #ccc;
}