输入伪类
本章将介绍与表单控件元素 (如<input>
、<select>
和<textarea>
)相关的伪类,这
些伪类中很多都非常实用,掌握这些伪类是前端人员的必备技能。
# 输入控件状态
# 可用状态与禁用状态伪类:enabled
和:disabled
:disabled
伪类用于匹配设置disabled
属性的元素,如:
:disabled {
border: 1px solid lightgray;
background: #f0f0f3;
}
1
2
3
4
2
3
4
:enabled
不常用。
# 读写特性伪类:read-only
和:read-write
它们用于匹配输入框元素是否只读,还是可读可写。这两个伪类中间都有短横线,由于“只读”的 HTML属性是 readonly,中间没有短横线因此很多人会记混。所以有短横线这一点大家可以注意一下。
另外,这两个伪类只作用于<input>
和<textarea>
这两个元素。
# 占位符显示伪类:placeholder-shown
:placeholder-shown
伪类的匹配和 placeholder
属性密切相关,顾名思义就是“占位符显示伪类”,表示当输入框的 placeholder
内容显示的时候,匹配该输入框。
# 默认选项伪类:default
:default
伪类选择器只能作用在表单元素上,表示处于默认状态的表单元素。
# 输入值状态
# 选中选项伪类:checked


文章更新于: 2022/12/01 16:05:30