default

CSS :default Pseudo Class

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

Version (版本)

HTML Living Standard (生活水平)

HTML5

Selectors Level 4 (选择器级别4)

Syntax

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>

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>


请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部