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;  //√图片
}

  

相关文章:

  • 2021-11-30
  • 2022-12-23
  • 2021-12-12
  • 2021-12-13
猜你喜欢
  • 2021-05-16
  • 2021-11-12
  • 2022-12-23
  • 2022-12-23
  • 2022-02-16
  • 2021-12-06
  • 2021-12-06
相关资源
相似解决方案