CSS :default Pseudo Class

The :default CSS pseudo-class will match the default in a group of associated elements, such as the radio button in a group of buttons that are selected by default, even if the user has selected a different value.

The :default pseudo-class can only be used on the <button>, <input> (when type="checkbox" or type="radio") and <option> elements.

Version

CSS3

Syntax

:default {
css declarations;
}

Example

<!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>

See another example with this pseudo class:

Example

<!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>

Browser support

51.0+ x 4.0+ 10.1+ 38+

Practice Your Knowledge

The :default pseudo-class can be used on the




Related articles