Как я могу использовать псевдоэлемент CSS: before {content: ''} влиять на элемент <option>?

Если у меня есть список оппонентов, как я могу использовать псевдоэлемент CSS: до {content: ''} повлиять на <option>? Ниже есть три варианта: я хотел бы вставить текст перед каждым.

Я знаю, что это можно сделать с помощью javascript/jQuery, но возможно ли это с помощью CSS?

<html>
<head>
    <style>

        option::before {
            content: "sandy - "
        }

    </style>


</head>
<body>

<select>
    <option>beach</option>
    <option>field</option>
    <option>carpet</option>
</select>


</body>
</html>

Ответ 1

Псевдоэлементы ::before и ::after фактически добавляют/присоединяют дочерний элемент node к элементу, поэтому это не будет работать ни на одном элементе, который не может содержать дочерние узлы.

Это будет (примерно) эквивалент:

<option><span>sandy - </span>beach</option>

Если вы хотите обновить текстовое значение, вам нужно будет использовать JavaScript.

Ответ 2

Похоже, что пока вы не можете. Согласно W3, эта спецификация не полностью определяет взаимодействие: before и: after с замененными элементами (такими как IMG в HTML)". Некоторые замещенные элементы имеют значение <img> теги, плагины (теги <object> ) и элементы формы (<button> , <textarea> , <input> , и теги <select> ).

Однако вы можете сделать это с помощью JavaScript. Oh и BTW, content:, before, and: after на самом деле CSS 2.1.

Ответ 3

Тестирование показывает, что единственным браузером, который действительно поддерживает создание контента с помощью: before (или:: before) в тегах OPTION, является Firefox. Все остальные браузеры НЕ принимают; это, как кто-то из указанных в связанном другом вопросе, является стандартным, поскольку они НЕ ЯВЛЯЮТ явным образом то, как обрабатывать сгенерированный контент в замененных элементах, таких как OPTION.

С другой стороны, на мой взгляд, тот факт, что при создании контента с параметром:: before работает, ни в коем случае не влияет на правильный тег SELECT и ОЧЕНЬ ПОЛЕЗНЫЙ; первый пример, который приходит мне на ум, - это когда вы хотите отображать параметры, которые являются элементами дерева, и поэтому вы хотите, чтобы увеличить ясность интерфейса, отступайте от них на основе их уровня в дереве.

В этом случае вы обязательно захотите сделать это ТОЛЬКО, когда параметр отображается в раскрывающемся раскрывающемся списке, в то время как отступ будет только неприятным, если он отображается при выборе, когда выпадающее меню закрыто.