css: выбранный псевдокласс, подобный: проверено, но для элементов <select>

<p>есть ли способ стилизовать текущий выбранный элемент <code><option></code> в элементе <code><select></code>?</p><p>я мог бы тогда дать цвет фона для выбранного в данный момент элемента option? таким образом, я могу стилизовать параметр, который в данный момент доступен для просмотра в закрытом раскрывающемся списке.</p>

<blockquote> <p>псевдокласс <code>:checked</code> изначально применяется к таким элементам, которые имеют атрибуты <code>selected</code> и <code>checked</code> html4</p> </blockquote><p>источник: <a href="http://www.w3.org/tr/selectors/#checked">w3.org</a> </p><hr><p>итак, этот css работает, хотя стилизация <code>color</code> возможна не во всех браузерах:</p><pre><code>option:checked { color: red; } </code></pre><hr><p>пример этого в действии, скрытие текущего выбранного элемента из выпадающего списка.</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>option:checked { display:none; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><select> <option>a</option> <option>b</option> <option>c</option> </select></code></pre></div> </div><hr><p>чтобы стилизовать текущую выбранную опцию в <em> закрытом </em> также, вы можете попробовать изменить логику:</p><pre><code>select { color: red; } option:not(:checked) { color: black; } /* or whatever your default style is */ </code></pre>

<p>на самом деле вы можете только стилизовать несколько css-свойств для элементов <em>:ified</em>. <code>color</code> не работает, <code>background-color</code> также, но вы можете установить <code>background-image</code>.</p><p>вы можете связать это с градиентами, чтобы добиться цели.</p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>option:hover, option:focus, option:active, option:checked { background: linear-gradient(#5a2569, #5a2569); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><select> <option>a</option> <option>b</option> <option>c</option> </select></code></pre></div> </div><p>работает на геккон/webkit.</p>

<p>это сработало для меня:</p><pre><code>select option { color: black; } select:not(:checked) { color: gray; } </code></pre>