CSS :disabled — стиль вимкнених полів форми
CSS-селектор :disabled вибирає елементи форми, вимкнені атрибутом disabled, — ті, що не приймають введення.
Загальний опис
автор: NagarD
Синтаксис
:disabled {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3.1 | 9 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Вимкнене поле й вимкнена кнопка з власним оформленням: сірий від браузера замінено на свій, курсор каже, що клацати марно.
HTML
<form class="form">
<label>Місто <input value="Київ"></label>
<label>Індекс <input value="01001" disabled></label>
<button>Зберегти</button>
<button disabled>Надіслано</button>
</form>CSS
.form {
display: grid;
gap: 10px;
max-width: 280px;
font: 15px system-ui, sans-serif;
}
.form input {
display: block;
width: 100%;
padding: 8px;
border: 1px solid #94a3b8;
border-radius: 6px;
}
.form button {
padding: 9px 16px;
border: 0;
border-radius: 6px;
background: #2563eb;
color: #fff;
cursor: pointer;
}
.form input:disabled {
background: #f1f5f9;
color: #94a3b8;
border-style: dashed;
cursor: not-allowed;
}
.form button:disabled {
background: #cbd5e1;
color: #64748b;
cursor: not-allowed;
}disabled на <fieldset> гасить усю групу одним атрибутом — під :disabled підпадає кожне поле всередині.
HTML
<form class="group">
<fieldset disabled>
<legend>Доставка кур'єром</legend>
<label>Вулиця <input value="Хрещатик"></label>
<label>Будинок <input value="22"></label>
<label><input type="checkbox" checked> Зателефонувати перед виїздом</label>
</fieldset>
</form>CSS
.group {
font: 15px system-ui, sans-serif;
max-width: 320px;
}
.group fieldset {
border: 1px solid #94a3b8;
border-radius: 8px;
padding: 12px;
display: grid;
gap: 8px;
}
.group input[type="text"],
.group input:not([type]) {
width: 100%;
padding: 7px;
border: 1px solid #94a3b8;
border-radius: 6px;
}
/* вимкнено сам fieldset — стиль дістає кожне поле всередині */
.group input:disabled {
background: #f1f5f9;
color: #94a3b8;
cursor: not-allowed;
}
.group fieldset:disabled legend {
color: #94a3b8;
}Сіре тло дістає лише вимкнене текстове поле — :disabled відсіює робочі.
HTML
<input type="text" value="робоче поле">
<input type="text" value="вимкнене поле" disabled>CSS
input[type="text"]:disabled {
background: #dddddd;
}Без уточнення типу :disabled фарбує будь-який вимкнений <input> — і текстове поле, і кнопку.
HTML
<input type="text" value="вимкнене поле" disabled>
<input type="submit" value="вимкнена кнопка" disabled>
<input type="text" value="робоче поле">CSS
input:disabled {
background: #dddddd;
}Недоступний пункт списку — червоний. Стилізація <option> у браузерах обмежена, тому список розгорнуто атрибутом size, де тло видно найкраще.
HTML
<select size="4">
<option>доступний пункт</option>
<option disabled>недоступний — червоний</option>
<option>ще один доступний</option>
</select>CSS
option:disabled {
background: red;
}Коментарі
Коментарів ще немає — будьте першим!