X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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

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

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

Версия

CSS3

Синтаксис

:default {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      input:default {
      box-shadow: 0 0 2px 2px #1c87c9;
      }
      .example {
      margin: 20px auto;
      font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :default</h2>
    <div class="example">
      <p>Вы любите кофе?</p>
      <input type="radio" name="radios" id="ex1" checked>
      <label for="ex1">Да</label> <br/>
      <input type="radio" name="radios" id="ex2">
      <label for="ex2">Нет</label>
    </div>
  </body>
</html>

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <div class="example">
      <form action="#">
        <input type="submit" value="Yes">
        <input type="submit" value="No">
      </form>
    </div>
  </body>
</html>

Поддержка браузера

51.0+ x 4.0+ 10.1+ 38+


Считаете ли это полезным?

Похожие статьи