CSS :default Pseudo Class

❮ Prev Next ❯

The :default pseudo-class matches the default element 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.

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

Version

HTML Living Standard

HTML5

Selectors Level 4

Syntax

:default {
  css declarations;
}

Example of the :default selector used for the <input> tag:

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

Example of the :default selector used for the <input> tag with a type attribute:

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