学透CSS-学会这9个伪类,让你的页面/表单更人性化!!! 连载中

网友投稿 614 2022-05-29

前言

一个优秀的网站永远都不是冷冰冰的,情感化、人性化一直是现代化网站所追求的!情感化设计利用彩配色激发用户情感,或高兴,或温暖,或宁静祥和;利用简单易懂,自由流畅的交互设计,吸引用户点击或参与;以及利用暖心体贴的界面文本设计,打动用户等等。

不知道有多少人关注过苹果的官方,大胆的颜色,惊人的动画,我觉得这就是具有情感的网站

虽然我们不是设计师,但是作为一个好的前端开发,在网站开发的时候也是需要一点人性化的意识,下面这两个输入框,在边框 边距 边角都不相同,最终的效果也各不相同。

不讨论具体的设计,单纯的介绍几个伪类,希望这几个伪类,能让你有所收获。

:read-write

学透CSS-学会这9个伪类,让你的页面/表单更人性化!!! 连载中

匹配规则

:read-write选择器将在以下情况下匹配元素:

input:read-write { background: #2ecc71; }

textarea:read-write { background: #2ecc71; }

p:read-write { background: #2ecc71; }

contenteditable p

:readonly

匹配规则

input:read-only { background: #e74c3c; }

p:read-only { background: #e74c3c; }

普通 p

:required

我觉得这个属性真的特别好,之前我们在做表单的时候,经常会在前面加一个*表示必须输入,或者当用户输入完之后提示一下某某字段是必须输入的,用户体验真的确实不好。但是有个这个属性,我们就可以来针对必须输入的input进行个性化的设置。

匹配规则

input:required, textarea:required { border-color: red ; }

:focus

设置当前由键盘tab或由鼠标激活的元素的样式。

:focus 基本上可以作用在大部分的元素上,设置了contenteditable或者tabindex 的元素也支持。

,