:enabled в CSS — стиль увімкнених полів форми й кнопок

HTML

<input type="text" value="увімкнене — жовте">
<input type="text" value="вимкнене" disabled>

CSS

input[type="text"]:enabled {
    background: #ffff00;
}

HTML

<h4>Правило <code>:enabled</code> / <code>:disabled</code></h4>
<div class="box first">
    <p>Абзац тексту й <a href="#">посилання</a> — жодне правило їх не бере.</p>
    <p><input value="звичайне поле"> <input value="вимкнене поле" disabled></p>
    <p><input value="лише для читання" readonly> — це НЕ вимкнене поле</p>
    <p><button type="button">кнопка</button>
        <button type="button" disabled>вимкнена кнопка</button></p>
    <p><select><option>список</option></select>
        <select disabled><option>вимкнений список</option></select></p>
    <p><textarea rows="1">поле тексту</textarea></p>
    <fieldset>
        <legend>Звичайна група</legend>
        <input value="поле всередині">
    </fieldset>
    <fieldset disabled>
        <legend>Вимкнена група</legend>
        <input value="поле всередині вимкненої групи">
        <button type="button">і кнопка теж</button>
    </fieldset>
    <p><output>output</output> <meter value="0.5"></meter>
        <progress value="0.5"></progress> — теж повз селектор</p>
</div>

<h4>Те саме під правилом <code>:not(:disabled)</code></h4>
<div class="box second">
    <p>Абзац тексту й <a href="#">посилання</a> — обидва обведені.</p>
    <p><input value="звичайне поле"> <input value="вимкнене поле" disabled></p>
    <p><button type="button">кнопка</button></p>
</div>

CSS

.box {
    max-width: 560px;
    padding: 6px 14px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

.box p {
    margin: 10px 0;
}

.first :enabled {
    outline: 3px solid #3a9a4f;
    outline-offset: 2px;
}

.first :disabled {
    outline: 3px solid #d64545;
    outline-offset: 2px;
}

.second :not(:disabled) {
    outline: 2px dashed #2f6fd0;
    outline-offset: 2px;
}

fieldset {
    margin: 12px 0;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

h4 {
    margin: 22px 0 8px;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}