CSS - Pseudo-class :default

The CSS pseudo-class selector :default selects the form elements that are the default values in the group of similar or related elements.

This pseudo-class may match the <button>, <input type="checkbox">, <input type="radio"> and <option> elements, in the following manner:

  • In case of a <button>, if it is a <form>'s submit button. It also applies to <input> types that submit forms.

  • In case checked attribute is specified for <input type="checkbox"> and <input type="radio">.

  • The first option element with selected attribute. In case of multiple <select>s, having more than one selected option, all will match :default.

Syntax

:default {
   /* ... */
}

CSS :default Example

Here is an example of :default pseudo-class for radio button. Here styling is apploed to the default value ("Both A and B"). 

<html>
<head>
<style>
   fieldset {
      width: 500px;
      height: 50px;
   }
   input:default {
      box-shadow: 0 0 4px 3px lightgreen;
   }

   input:default + label {
      color: crimson;
   }
</style>
</head>
<body>
   <h2>:default example - radio</h2>
   <fieldset>
      <legend>Choose option</legend>
    
      <input type="radio" name="option" id="onlya" value="onlyA" />
      <label for="onlyA">Only A</label>
    
      <input type="radio" name="option" id="onlyb" value="onlyB" />
      <label for="onlyB">Only B</label>
    
      <input type="radio" name="option" id="both" value="bothAB" checked/>
      <label for="bothAB">Both A & B</label>
    
      <input type="radio" name="option" id="none" value="none" />
      <label for="none">None</label>
    </fieldset>
</body>
</html>

Here is an example of :default pseudo-class for checkbox, with multiple options having selected state. Here we see more than one checkbox is marked as checked (default values). Hence the styling is applied only to these those checkboxes that are default.

<html>
<head>
<style>
   form {
      display: inline-block;
   }
   input[type="checkbox"]:default {
      box-shadow: 0 0 3px 3px red;
   }
</style>
</head>
<body>
   <h3>Select Flavor</h3>  
   <form action="">
      <input type="checkbox" name="flav" value="butterscotch" checked> Butterscotch
      <input type="checkbox" name="flav" value="Chocolate"> Chocolate
      <input type="checkbox" name="flav" value="cookiencream"> Cookie n Cream
      <input type="checkbox" name="flav" value="hazelnut" checked> Hazelnut
      <input type="checkbox" name="flav value="almond"> Roasted Almond
      <input type="checkbox" name="flav" value="strawberry"> Strawberry
   </form>
</body>
</html>
Advertisements