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

Псевдокласс :default соответствует элементу по умолчанию в группе связанных элементов, например, радиокнопке, которая изначально выбрана с помощью атрибута checked, даже если пользователь позже выбрал другое значение. В отличие от :checked, который отражает текущее интерактивное состояние, :default соответствует только начальному состоянию элемента по умолчанию.

Этот псевдокласс можно использовать только для элементов <button>, <input> (при type="checkbox" или type="radio") и <option>.

Версия

HTML Living Standard

HTML5

Selectors Level 4

Синтаксис

Код синтаксиса CSS :default

css

:default {
  css declarations;
}

Пример использования селектора :default для тега `<input>`:

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:default {
        box-shadow: 0 0 2px 2px #1c87c9;
      }
      .example {
        margin: 20px auto;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>:default selector example</h2>
    <div class="example">
      <p>Do you like coffee?</p>
      <input type="radio" name="radios" id="ex1" checked />
      <label for="ex1">Yes</label>
      <br />
      <input type="radio" name="radios" id="ex2" />
      <label for="ex2">No</label>
    </div>
  </body>
</html>

Try it Yourself »

Пример использования селектора :default для тега `<input>` с атрибутом type:

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        margin: 40px auto;
        max-width: 700px;
      }
      input[type=submit] {
        padding: .6em 1em;
        font-size: 1em;
        width: 100px;
        margin-bottom: 1em;
      }
      input[type=submit]:default {
        border: 4px dotted #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:default selector example</h2>
    <div class="example">
      <form action="#">
        <input type="submit" value="Yes" />
        <input type="submit" value="No" />
      </form>
    </div>
  </body>
</html>

Try it Yourself »

Практика

Для чего можно использовать 'стандартный стиль' в CSS?

Он используется для определения стандартной привлекательности каждого элемента.Он используется для установки макета HTML-страницы по умолчанию.Его можно использовать для стилизации атрибутов, таких как цвет и размер шрифта, HTML-страницы.Он не может использоваться для стилизации HTML-элементов.

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

Версия ​

Синтаксис ​

Пример использования селектора :default для тега <input>: ​