input : required 选择必填表单域
input : focus : invalid 选择当前聚焦的且含有非法输入值的表单域
input : focus : valid 选择当前聚焦的且含有合法输入值的表单域
使用上面的伪类选择器再编写三条新规则:
input : required {
border : 1px solid red;
}
//输入值不符合格式时,表单右边出现×
input : :focus : invalid {
background:url('../img/cross.png') no-repeat right; //×图片
}
//输入值符合格式时,表单右边出现√
input : :focus : valid {
background:url('../img/tick.png') no-repeat right; //√图片
}