CSS :default Pseudo Class

The :default pseudo-class matches the default element in a group of associated elements, such as the radio button that is initially selected via the checked attribute, even if the user has since selected a different value. Unlike :checked, which reflects the current interactive state, :default only matches the element's initial default state.

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

CSS :default syntax code

css

:default {
  css declarations;
}

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

CSS :default code example

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>

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

CSS :default another code example

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>

Practice

What can the 'default style' in CSS be used for?

It is used to define the standard attractiveness of every element.It is used to set the default layout of an HTML page.It can be used to style attributes, like color and font size, of an HTML page.It cannot be used to style HTML elements.

CSS :default Pseudo Class ​

Version ​

Syntax ​

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