Установить выбранный вариант с помощью CSS?

Question

Можно ли установить атрибут selected тега option с помощью класса CSS?

Мне интересно, возможно ли что-то подобное в таблице стилей:

option.selected {
  selected: true;
}

Тогда в HTML:

<option class="selected">

Что будет иметь тот же эффект, что и установка атрибута selected. Возможна ли эта техника?

Answer 1

Нет, CSS изменяет только представление, а не содержимое (хотя CSS3 поддерживает некоторую модификацию содержимого, но не выбор значений.) Вам нужно будет использовать JavaScript, если вы не можете изменить HTML напрямую.

Answer 2

option[selected] {background-color:skyblue;color:white;}

в случае, если вы хотите показать предыдущий отмеченный выбор - независимо от изменений от пользователя после отображения результата, старые выбранные остаются sykblue, новые изменения отображаются в darkblue.

Answer 3

Не с помощью CSS, но это может быть выполнено с помощью JavaScript.

function setSelects() {

    var allSelects = document.getElementsByTagName("select");
    for (var i = 0; i < allSelects.length; i++) {
        for (var j = 0; j < allSelects[i].options.length; j++) {
            if (allSelects[i].options[j].className == "selected") {

                allSelects[i].selectedIndex = j;
            }
        }
    }
}

window.onload = setSelects;

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

Answer 4

Если вы используете JQuery, вы можете сделать что-то очень похожее, но не CSS самостоятельно.

Answer 5

Да, это возможно, но я не уверен в IE

Код ниже изменит стиль для выбранный по умолчанию элемент.

           <style>
           option[selected="selected"] {
           color:red;
           font-weight:bold
           }
           </style>

           <select>
           <option value="1">Txt</option>
           <option value="2" selected="selected">Another Txt</option>
           </select>

Answer 6

Выбранное не является свойством CSS. Смотрите спецификацию на http://www.w3.org/TR/CSS2/propidx.html.