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

Псевдокласс :disabled выбирает и стилизует отключённые элементы.

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

Обычно это элементы форм, такие как кнопки (<button>), выпадающие списки (<select>), поля ввода (<input>) и текстовые области (<textarea>).

Отключённые элементы не реагируют на клики, ввод текста и не получают фокус.

Версия

CSS Basic User Interface Module Level 3

Selectors Level 3

Синтаксис

Пример синтаксиса CSS :disabled

css

:disabled {
  css declarations;
}

Пример установки цвета фона для отключённого элемента `<input>`:

Пример кода CSS :disabled

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        padding: 2px 5px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
      }
      input[type=text]:enabled {
        background: #eee;
      }
      input[type=text]:disabled {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:disabled selector example for input</h2>
    <form action="">
      <label for="name">First name:</label>
      <input type="text" value="John" id="name" />
      <br />
      <label for="lastname">Last name:</label>
      <input type="text" value="Smith" id="lastname" />
      <br />
      <label for="country">Country:</label>
      <input type="text" disabled="disabled" value="10 High Street" id="country" />
    </form>
  </body>
</html>

Try it Yourself »

Пример установки цвета фона для отключённых элементов `<option>`:

Ещё один пример кода CSS :disabled

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      option:disabled {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:disabled selector example for option</h2>
    <select>
      <option value="paris">Paris</option>
      <option value="london" disabled>London</option>
      <option value="moscow">Moscow</option>
      <option value="rome" disabled>Rome</option>
      <option value="berlin">Berlin</option>
    </select>
  </body>
</html>

Try it Yourself »

Примечание: Псевдокласс :disabled имеет приоритет над :valid и :invalid. Отключённые элементы формы не проходят валидацию в браузере.

Пример отключённого элемента `<input>`:

Пример отключённого поля ввода

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        width: 60%;
        margin: 0;
        border: none;
        outline: 1px solid lightgrey;
        outline-offset: 2px;
      }
      input:disabled {
        background: #cccccc;
        cursor: not-allowed;
      }
      form {
        background: #67a6ec;
        padding: 1.5em;
        max-width: 400px;
        width: 100%;
        outline: 10px solid rgba(17, 58, 103, 0.6);
      }
      hr {
        visibility: hidden;
      }
      label {
        margin-right: 3%;
        text-align: left;
        display: inline-block;
        width: 35%;
      }
    </style>
  </head>
  <body>
    <h2>:disabled selector example with styling</h2>
    <form action="#">
      <label for="name">Enabled Input:</label>
      <input type="text" autofocus />
      <hr />
      <label for="name">Disabled Input:</label>
      <input type="text" disabled />
    </form>
  </body>
</html>

Try it Yourself »

Практика

Какие характеристики имеет атрибут 'disabled' в CSS?

Атрибут disabled является логическим (булевым) атрибутом.Атрибут disabled часто используется с элементами форм.При установке атрибута disabled он влияет на элемент и его дочерние элементы.Атрибут disabled нельзя использовать с кнопками.Атрибут disabled может отключать только поля ввода текста.

Псевдокласс :disabled в CSS ​

Версия ​

Синтаксис ​

Пример установки цвета фона для отключённого элемента <input>: ​

Пример установки цвета фона для отключённых элементов <option>: ​

Пример отключённого элемента <input>: ​

Практика ​

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

Версия

Синтаксис

Пример установки цвета фона для отключённого элемента `<input>`:

Пример установки цвета фона для отключённых элементов `<option>`:

Пример отключённого элемента `<input>`:

Практика