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

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

绥宁网站建设公司成都创新互联公司,绥宁网站设计制作，有大型网站制作公司丰富经验。已为绥宁上千家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的绥宁做网站的公司定做！

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

前言

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

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

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

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

:read-write

匹配规则

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

非readonly和disabled的input

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

非readonly和disabled的textarea

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

可以设置contenteditable的元素

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

:readonly

匹配规则

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

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

其他不可编辑的元素

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

:required

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

匹配规则

设置了required属性的，, 或 元素</h4> <pre><code>input:required, textarea:required { border-color: red ; } </code></pre> <p></p> <p></p> <h2>:focus</h2><p>设置当前由键盘tab或由鼠标激活的元素的样式。</p> <p>:focus 基本上可以作用在大部分的元素上，设置了contenteditable或者tabindex 的元素也支持。</p> <p>像<a>, <button>, <input>, <textareas> 各个浏览器都有不同的默认样式。</p> <p>:focus可以设置为全局也可以针对特定的元素。</p> <pre><code> :focus { background: #2ecc71; } </code></pre> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <h2>:disabled</h2><p><button>，<input>，<textarea>，<optgroup>，<option>和<fieldset> 都可以设置:disabled 属性</p> <pre><code>input:disabled { background: #e74c3c; } </code></pre> <p></p> <h2>:enabled</h2><p><input>, <select>, <textarea>可以设置属性，与:disabled 相反。</p> <h2>:invalid和:valid</h2><p>这两个属性在用户与页面上的表单交互时向他们提供反馈。</p> <p>比如下面这个例子：验证邮箱格式是否正确，之前我们会怎么做，当用户输入完成提交的时候，弹对话框告诉用户格式不正确。用这两个属性就让事情很简单！</p> <pre><code>input:invalid { background: hsla(0, 90%, 70%, 1); } input:valid { background: hsla(100, 90%, 70%, 1); } <label for="email">Email:</label> <input type="email" name="email" /> </code></pre> <p>开始的效果；</p> <p></p> <p>不正确的效果：</p> <p></p> <p>正确的效果</p> <p></p> <h2>:checked</h2><p>仅<input> type为radio 和 checkbox 可以设置。</p> <p></p> <p>没有选中的效果<br>、<br> 选中后的效果</p> <p></p> <br> 文章名称：学会这9个伪类,让你的页面 表单更人性化！！！ <br> 分享URL：<a href="http://bjjierui.cn/article/dsojech.html">http://bjjierui.cn/article/dsojech.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/isjdjo.html">JavaScript属性描述对象的示例分析</a> </li><li> <a href="/article/isjcoo.html">XML模式中DublinCore的示例分析</a> </li><li> <a href="/article/isjcdg.html">vue的axios怎么用</a> </li><li> <a href="/article/isjccs.html">mysql如何查看数据库创建信息</a> </li><li> <a href="/article/isjcdp.html">如何实现Swing容器组件的显示效果</a> </li> </ul> </div> </div> <ul class="kf"> <li class="kf1"><span class="tela">建站热线：<a href="tel:13518219792" target="_blank">13518219792</a></span></li> <li class="kf11"><span class="weixin"><img src="/Public/Home/images/weixin.jpg" alt="网站建设微信咨询"><br> 微信扫一扫在线咨询</span> </li> <li class="kf5">QQ客服： <a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" class="on2" target="_blank" rel="nofollow"><img src="/Public/Home/images/qq.gif" alt="建站业务咨询" title="建站业务咨询"></a> <a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" class="on2" target="_blank" rel="nofollow"><img src="/Public/Home/images/qq.gif" alt="网站设计咨询" title="网站设计咨询"></a></li> <li class="kf2"><a href="http://www.bjjierui.cn/cases/" target="_blank">案 例</a></li> <li class="kf4"><a href="http://www.bjjierui.cn/" target="_blank">价 格</a></li> <li class="kf6" title="返回顶部"></li> </ul> <div class="footer"> <div class="footer_2"> <p>Copyright © 2012-2020 <strong>网创优客信息咨询</strong> 版权所有 蜀ICP备2023009085号-7<br /> 手机:13518219792 QQ:631063699 地址：成都市青羊区锣锅巷31号 邮编:610000 Email:wh@cdxwcx.com<br/> 成都网络公司-网创优客建站品牌专注<a href="http://www.bjjierui.cn/">成都网站建设</a>、<a href="http://www.bjjierui.cn/">成都网站设计</a>服务，为成都公司建设高品质的网站</p> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".kf6").click(function() { $('body,html').animate({ scrollTop : 0 }, 500); return false; }); }) var bodyhe=$("body").height(); var winhe=330; var bodyf=bodyhe-winhe; var bodyft=bodyhe-365; window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; if(t>200){ $(".kf .kf6").stop().animate({opacity:'1'},200); }else{$(".kf .kf6").stop().animate({opacity:'0'},200);} if(t>1 && t<winhe){ $(".header").addClass('no'); $(".header").removeClass('notwo'); }else if(t>winhe){ $(".header").removeClass('no'); $(".header").addClass('notwo'); }else{ $(".header").removeClass('no'); } } </script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>