经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
使用CSS3实现input多选框自定义样式的方法示例_css3_CSS
来源:jb51  时间:2019/7/22 10:27:43  对本文有异议

原理:首先把input元素隐藏掉,然后用CSS设置label元素(其他元素也可以)的样式,选中时的样式使用input:check+label选中label,无须使用图片和JS

效果预览

html代码

  1. <div class="radio">
  2. <input type="checkbox" id="sex1">
  3. <label for="sex1"></label>
  4. </div>
  5. <div class="radio">
  6. <input type="checkbox" id="sex2">
  7. <label for="sex2"></label>
  8. </div>

CSS代码

  1. .radio {
  2. position: relative;
  3. display: inline-block;
  4. margin-right: 12px;
  5. }
  6.  
  7. .radio input {
  8. width: 15px;
  9. height: 15px;
  10. appearance: none;/*清楚默认样式*/
  11. -webkit-appearance: none;
  12. opacity: 0;
  13. outline: none;
  14. z-index: 8; /*让input层级高于label,使之能选中*/
  15. }
  16.  
  17. .radio label {
  18. position: absolute;
  19. left: 0;
  20. top: 6px;
  21. width: 15px;
  22. height: 15px;
  23. border: 1px solid #3582E9;
  24. }
  25.  
  26. .radio input:checked+label::after {
  27. content: "";
  28. position: absolute;
  29. left: 4px;
  30. top: 0px;
  31. /* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */
  32. width: 5px;
  33. height: 12px;
  34. border-right: 1px solid #000000;
  35. border-bottom: 1px solid #000000;
  36. transform: rotate(45deg);
  37. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号