PHPIN.NET

 找回密码
 立即注册
查看: 58|回复: 0

[HTML5/CSS3] 选择框样式

[复制链接]

439

主题

462

帖子

3834

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3834
发表于 2018-11-17 16:34:29 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
这是在工作中遇到需要美化单选框和复选框查资料看到别人的,特别声明此文是转载别人,在此感谢原作者。
觉得很有用在此码起来原理就是:隐藏选择框本身,在利用<i>标签放在原来选择框位置上。

看代码:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>选择框样式</title>
  6. <style>
  7. label {font-size:12px;cursor:pointer;}
  8. label i {font-size:12px;font-style:normal;display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;margin:-2px 2px 1px 0px;border:#2489c5 1px solid;}
  9. input[type="checkbox"],input[type="radio"] {display:none;}
  10. input[type="radio"] + i {border-radius:7px;}
  11. input[type="checkbox"]:checked + i,input[type="radio"]:checked + i {background:#2489c5;}
  12. input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;}
  13. input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;}
  14. </style>
  15. </head>
  16. <body>
  17. <label><input type="checkbox"><i>✓</i>复选框</label><br>
  18. <label><input type="checkbox" checked><i>✓</i>复选框</label><br>
  19. <label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br>
  20. <label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br>
  21. <br><br><br><br>
  22. <label><input type="radio" name="a" value="1"><i>✓</i>单选框</label><br>
  23. <label><input type="radio" name="a" value="2"><i>✓</i>单选框</label><br>
  24. <label><input type="radio" name="a" value="3"><i>✓</i>单选框禁用</label><br>
  25. <label><input type="radio" name="a" value="4"><i>✓</i>单选框禁用已选</label><br>
  26. </body>
  27. </html>
复制代码



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图

GMT+8, 2018-12-15 03:01

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表