Как изменить стиль флажка "Выбрать" "метка optgroup"

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

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

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

Ответ 1

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

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

И это в Firefox:

Ответ 2

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

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

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

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

Ответ 3

В Firefox используется ярлык с использованием этого правила:

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

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

Ответ 4

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

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

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

Затем вы убедитесь, что элементы select стилизованы определенным образом с помощью 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;
}

Ответ 5

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

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

вы можете сделать снимок при стилизации, например,

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