hooyantsing's Blog

P19_14_通过表单伪类创建个性化表单

字数统计: 132阅读时长: 1 min
2020/03/24

P19 14 通过表单伪类创建个性化表单

对禁用/可用的控制

:disabled :enabled

808a5369b7f821132cef4ad6230c3cf8.png

对选中的控制

:checked

妙用:选择哪个哪个字变颜色。

1
2
3
input:checked + label {
    color:grean;
}

e1adad751772f0341ea138bd6d0975c8.png

对必填/非必填的控制

:required :optional

39c360373183c13363a5c3b964f6de17.png

强制优先级

!important

c7cdd0a4b38ef0318507e560bcb910f6.png

对有效/无效的控制

:valid :invalid

对input标签设置type,符合规定格式的是有效,否则是无效的。

例:第二个输入框要求是email格式,不符合要求格式,因此使用无效的样式。

353258d2ad3e23f1b36053c3036587af.png

CATALOG