UI状态伪类选择器,用于选择处于某种状态下的UI元素,主要用于HTML表单上,根据表单元素的不同状态,定义不同的样式,来增强用户体验。
表单元素的状态包括获得焦点、失去焦点、选中、未选中、可用、不可用、有效、无效、必填、选填、只读等等。
在使用UI状态伪类选择器时,可以结合属性选择器,来限定特定元素的类型,甚至将UI状态伪类结合在一起使用,来创造更丰富的样式。如果不限定元素的类型,则对任何元素均有效。
E:focused
E:focused伪类选择器选择获得的元素。如,以下规则可以为任何获得焦点的 input 元素添加 1px 的橙色边框,而不管它的类型:
input:focus {
border: 1px solid #f60;
}
运行结果如图 2‑23 所示:
图2-23 获得焦点状态
E:checked
E:checked伪类选择器选择表单中被选中的 radio 或 checkbox 元素。假设在注册用户的页面上,有一个复选框和同意注册的文本:
<input type="checkbox" value="1" /><label> 我已经阅读并同意网站注册条款</label>
以下规则为选中的单选按钮或复选框紧邻的 label 元素添加样式:
input:checked + label {
color: green;
}
当用户选中复选框后,紧邻复选框的 label 元素中的文本将变成绿色。运行结果如图 2‑24 所示:
图2-24 复选框选中状态
E:enabled/E:disenabled
E:enabled伪类选择器选择处于可用状态的元素,E:disenabled伪类选择器选择处于不可用状态的元素。假设页面上有两个元素,一个可用,一个不可用:
<label> enabled: </label><input type="text" />
<label>disabled: </label><input type="text" disabled />
就可以针对元素的可用、不可用状态,应用不同的样式。如,对不可用的元素,可以禁用鼠标,并设置灰色背景和边框:
input[type="text"] {
width: 200px;
height: 20px;
background: #fff;
border: 1px solid #cbcbcb;
}
input[type="text"]:disabled {
cursor: not-allowed;
background: #eee;
border-color: #ddd;
}
运行结果如图 2‑25 所示:
图2-25 可用、不可用状态
如果一个表单元素经常在可用和不可用状态之间进行切换,通常将这两个选择器结合使用,来改变元素的样式,增加表单的易用性。
E:valid/E:invalid
E:valid 伪类选择器选择输入数据有效的元素,E:invalid 伪类选择器选择输入数据无效的元素。如,对于获得焦点的 email 输入框,就可以根据用户的输入是否为有效的邮箱地址,来应用不同的样式:
<label>E-Mail: </label><input type="email" name="email" />
此时,就可以根据用户的输入,来应用不同的样式。如果输入有效的邮箱地址,文本框的边框颜色为绿色,如果输入无效的邮箱地址,文本框的边框颜色为红色:
input[type="email"]:focus:valid {
border: 1px solid green;
}
input[type="email"]:focus:invalid {
border: 1px solid red;
}
这样的话,在页面初始加载时,由于用户还没有进行输入,邮箱邮箱地址一定是非法值,文本框就会显示红色警示边框。运行结果如图 2‑26 所示:
图2-26 输入非法的邮箱地址
随着用户不断输入,当邮箱地址合法的时候,文本框就会由红色边框,自动变成安全的绿色边框。运行结果如图 2‑27 所示:
图2-27 输入合法的邮箱地址
E:in-range/E:out-of-range
E:in-range伪类选择器选择输入数据在有效范围的元素,E:out-of-range伪类选择器选择输入数据超出有效范围的元素。如,对于 input 类型为 number 的文本输入框,其输入的值必须在 min 和 max 的范围内。
<label>请输入数字(0~10): </label><input type="number" min=0 max=10 />
此时,就可以根据用户的输入,来应用不同的样式。如果输入的数值未超出范围,文本框的边框颜色为绿色,一旦输入的数值超出范围,文本框的边框颜色就变为红色:
input[type="number"]:focus:in-range {
border: 1px solid green;
}
input[type="number"]:focus:out-of-range {
border: 1px solid red;
}
这样的话,在用户输入数值的过程中,当输入的数值在有效范围内,文本框就是安全的绿色边框。运行结果如图 2‑28 所示:
图2-28 输入合法的数值
随着用户的不断输入,当输入的数值超出有效范围时,文本框就会由安全的绿色边框,自动变成红色警示边框。运行结果如图 2‑29 所示:
图2-29 输入非法的数值
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。