应用CSS改动HTML的checkbox实际效果的小示例共享

日期:2021-01-20 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

应用checkbox操纵其后的元素
  checkbox控制能够依据电脑鼠标的点一下来切换其情况,并且CSS中可使用:checked伪类来对于选定情况的checkbox设定款式。再相互配合上CSS中的“+”或“~”挑选器,便可以从checkbox的实际操作来操纵它以后的元素了。乃至再相互配合上LABEL标识能够完成更多实际效果。
运作

CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <style>   
  3. [type=checkbox]+* {display:none;}   
  4. [type=checkbox]:checked+* {display:inline-block;}   
  5. </style>   
  6. <input type="checkbox" /><input />  

  这个事例中,文字框默认设置是掩藏的,仅有当勾选checkbox时,其后的文字框才会显示信息。这样便可以完成无JavaScript的切换实际效果了。
  或许有人会感觉放个checkbox在网页页面上太碍眼了。实际上,即便checkbox本身处在掩藏情况,CSS中对:checked的分辨也仍然起效。那末大家能够掩藏掉这个checkbox,让LABEL标识为其设定回应地区。
运作

CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <style>   
  3. body {font:14px/1.5 微软雅黑;}   
  4. [type=checkbox] {display:none;}   
  5. [type=checkbox]~input {display:none;}   
  6. [type=checkbox]:checked~input {display:inline-block;}   
  7. [type=checkbox]~span {cursor:pointer;margin-right:10px;}   
  8. [type=checkbox]~span:before {content:'点我显示信息文字框';}   
  9. [type=checkbox]~span:hover {color:#C30;}   
  10. [type=checkbox]:checked~span:before {content:'点我掩藏文字框';}   
  11. </style>   
  12. <label><input type="checkbox" /><span></span><input /></label>  

  但这样的做法還是有点局限性的,由于现阶段的CSS不适用:has、:parent之类的物品,因此适用的实际操作仅局限在LABEL中,而LABEL的默认设置个人行为一直会危害其內部第1个控制,上面的编码即便弹出了文字框,在点一下文字框情况下一样有将会开启LABEL的默认设置姿势,致使文字框掩藏。
  总而言之,这里只是出示了这样的方式,至于要用在何处要如何用就靠大伙儿自身科学研究了。

上一篇:CSS字体样式特性全分析 返回下一篇:没有了