CSS - 伪类 :default

CSS 伪类选择器 :default 选择在相似或相关元素组中作为默认值的表单元素。

此伪类可以按以下方式匹配 <button>、<input type=“checkbox”>、<input type=“radio”> 和 <option> 元素：

如果是<button>，则是<form>的提交按钮。它也适用于提交表单的<输入>类型。
如果为 <input type=“checkbox”> 和 <input type=“radio”>指定了 checked 属性。
具有 selected 属性的第一个选项元素。如果有多个 <select>s，则有多个选定选项，所有选项都将匹配 :default。

语法


:default {
	 	/* ... */
}

CSS :default 示例

下面是单选按钮的 :default 伪类的示例。此处的样式适用于默认值（“A 和 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>

下面是复选框的 :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>

打印本页