学会这9个伪类,让你的页面 表单更人性化!!!

虚幻大学 xuhss 166℃ 0评论

? 优质资源分享 ?

学习路线指引(点击解锁) 知识定位 人群定位
? Python实战微信订餐小程序 ? 进阶级 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。
?Python量化交易实战? 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

大家好,我是半夏?,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 ? 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

原文链接 ==>http://sylblog.xin/archives/50

前言

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

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

6c3f174450dab04ff67261ffacfbdbeb - 学会这9个伪类,让你的页面 表单更人性化!!!

虽然我们不是设计师,但是作为一个好的前端开发,在网站开发的时候也是需要一点人性化的意识,下面这两个输入框,在边框 边距 边角都不相同,最终的效果也各不相同。
b557054f2f9ef92af8ccd8fefb98b960 - 学会这9个伪类,让你的页面 表单更人性化!!!

67ae5fd6390d897adfe365c897b84167 - 学会这9个伪类,让你的页面 表单更人性化!!!

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

:read-write

匹配规则

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

非readonly和disabled的input

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

<input type="text" value="正常 input" />

dd1ed789a36a872b80d4f45ec796303d - 学会这9个伪类,让你的页面 表单更人性化!!!

非readonly和disabled的textarea

textarea:read-write {
  background: #2ecc71;
}
<textarea >正常 textareatextarea>

5e5e79963698d7d57332588728f7b5a0 - 学会这9个伪类,让你的页面 表单更人性化!!!

可以设置contenteditable的元素

p:read-write {
  background: #2ecc71;
}
<p  contenteditable>contenteditable pp>

8504f8c1c0eae02694005a5c57e07095 - 学会这9个伪类,让你的页面 表单更人性化!!!

:readonly

匹配规则

具有readonly/disabled 属性的input/textarea等form元素

input:read-only {
  background: #e74c3c;
}
<input type="text" value="diabled input" disabled />
<input  type="text" value="readonly input" readonly />

1a0cdb72d4e2a2ff7b599d86ccb08356 - 学会这9个伪类,让你的页面 表单更人性化!!!

其他不可编辑的元素

p:read-only {
  background: #e74c3c;
}
"testInput">普通 p

d9016fc974495b4c7920650dce4e3b7f - 学会这9个伪类,让你的页面 表单更人性化!!!

:required

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

匹配规则

设置了required属性的,, 或 元素

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

184e1dbf92ff4363fafdf7129ac77798 - 学会这9个伪类,让你的页面 表单更人性化!!!

a9d1b01a85f182a242b9a512f0a22351 - 学会这9个伪类,让你的页面 表单更人性化!!!

:focus

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

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

像,

, , 可以设置属性,与:disabled 相反。

:invalid和:valid

这两个属性在用户与页面上的表单交互时向他们提供反馈。

比如下面这个例子:验证邮箱格式是否正确,之前我们会怎么做,当用户输入完成提交的时候,弹对话框告诉用户格式不正确。用这两个属性就让事情很简单!

input:invalid {
  background: hsla(0, 90%, 70%, 1);
}

input:valid {
  background: hsla(100, 90%, 70%, 1);
}

for="email">Email:
<input type="email" name="email" />

开始的效果;

fe474ecbdb16aecae99533c9521f7e62 - 学会这9个伪类,让你的页面 表单更人性化!!!

不正确的效果:

85a418fa111330d9d1cf3d1f8ae8f713 - 学会这9个伪类,让你的页面 表单更人性化!!!

正确的效果

17561803db81e63e339debc3bc90d5f1 - 学会这9个伪类,让你的页面 表单更人性化!!!

:checked

仅 type为radio 和 checkbox 可以设置。

01aeb02141cd67580646376387f028ec - 学会这9个伪类,让你的页面 表单更人性化!!!

没有选中的效果
a4d8867fb58e6cac3a219ff870e44f76 - 学会这9个伪类,让你的页面 表单更人性化!!!
选中后的效果

d2b13fe30f63e53d6c9b28e39e83008a - 学会这9个伪类,让你的页面 表单更人性化!!!

转载请注明:xuhss » 学会这9个伪类,让你的页面 表单更人性化!!!

喜欢 (5)

您必须 登录 才能发表评论!