码迷,mamicode.com
首页 > 其他好文 > 详细

曲线修改CheckBox的样式

时间:2017-10-25 19:44:58      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:meta   round   tle   tar   代码   red   样式   pos   content   

在前端开发中,要做到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)重画了一个假象。

曲线修改CheckBox的样式

标签:meta   round   tle   tar   代码   red   样式   pos   content   

原文地址:http://www.cnblogs.com/handsomehuwei/p/7731274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!