曲线修改CheckBox的样式

在前端开发中，要做到CheckBox自定义的样式，实现起来可能会有点麻烦，以下介绍一种通过伪类来实现该功能的方法，希望会有用。

代码如下：

  1. <html>  
  2. <head>  
  3.     <meta charset="UTF-8">  
  4.     <title>CheckBox</title>  
  5.     <style type="text/css">  
  6.         input[type=checkbox] {  
  7.             position: relative; 
  8.         }  
  9.         //这里是选中前的状态，可以直接以图片作为背景
  10.         input[type=checkbox]::before{  
  11.             content:'';  
  12.             position: absolute; 
  13.             background-color:#999;
  14.             border-radius: 4px;  
  15. 　　    //图片样式
  16.             background:url('check.png') no-repeat;
  17.             background-size: 100% 100%;
  18.         }  
  19.         //这里是选中后的状态
  20.         input[type=checkbox]:checked::before {  
  21.             color:white;  
  22.             background-color:red;  
  23.             content: '中';  
  24.             //图片样式
  25.            background:url('checked.png') no-repeat;
  26.            background-size: 100% 100%;
  27.         }  
  28.     </style>  
  29. </head>  
  30.   
  31. <body>  
  32. <input type="checkbox"/>  
  33. </body>  
  34. </html>

　　PS：其实checkbox的样式还是浏览器的原始样式，只是在它原来的位置上通过（::before）重画了一个假象。

posted @ 2017-10-25 18:21  Rankingblack  阅读(130)  评论(0)  编辑  收藏  举报