CSS приклад: Псевдокласс :disabled

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.0+ 3.1+ 1.0+ 1.0+ 2.0+

Коротка інформація

Застосовується до елементів форми
Посилання на специфікацію http://www.w3.org/TR/css3-selectors/#enableddisabled

Версії CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Опис

Псевдоклас :disabled використовується для застосування стилю до заблокованих елементів форми. Такі елементи не можуть отримати фокус, бути натиснутими або активованими, в текстових полях неможливо набирати текст.

Синтаксис

селектор:disabled { ... }

Значення

Немає.

Приклад

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>disabled</title>
  <style>
   textarea:disabled { 
    background: url(images/dline.png); 
    border: 1px solid #666; 
    padding: 5px;
   }
  </style>
 </head>
 <body>
  <form>
   <p><textarea disabled cols="30" rows="5">
   Це заблоковане поле, в нього неможливо нічого писати</textarea></p>
  </form> 
 </body>
</html>

У цьому прикладі змінено стиль заблокованого текстового поля. Результат прикладу показаний на малюнку 1.

Малюнок 1. Результат використання псевдокласу :disabled

Часті запитання

  • Q: Як використовувати псевдоклас :disabled в CSS?

    A: Псевдоклас :disabled використовується для стилізації елементів, які знаходяться в стані disabled, наприклад, кнопок або полів вводу, які є неактивними.

  • Q: Як визначити, що елемент має стан disabled у CSS?

    A: Елемент зі станом disabled можна вибрати за допомогою псевдокласу :disabled. Наприклад, button:disabled або input:disabled.

  • Q: Де можна використовувати псевдоклас :disabled у CSS?

    A: Псевдоклас :disabled можна використовувати для стилізації елементів у формах, які знаходяться в стані disabled, а також для заборони взаємодії з такими елементами.

  • Q: Як змінити стиль елемента зі станом disabled у CSS?

    A: Для зміни стилю елемента зі станом disabled використовують псевдоклас :disabled разом із властивостями CSS, наприклад, opacity або зміна кольору тексту.

  • Q: Чи можна комбінувати псевдоклас :disabled з іншими селекторами у CSS?

    A: Так, псевдоклас :disabled можна комбінувати з іншими селекторами у CSS для більш точного вибору елементів зі станом disabled. Наприклад, input[type='text']:disabled або button:disabled:hover.