好看的checkbox样式

如图所示：

总结下来知道两点就可以了1.<input>标签设置visibility: hidden属性。2.label设置for属性对应相应的input标签，label的css样式设置成自己需求的出发按钮样式。

<div class="content">
     	<section class="checkbox-item">
     		<div class="checkone">
     			<input type="checkbox" id="checkone"/>
     			<label for="checkone"></label>
     		</div>
     	</section>
     	<section class="checkbox-item">
     		<div class="checktwo">
     			<input type="checkbox" id="checktwo"/>
     			<label for="checktwo"></label>
     		</div>
     	</section>
     	<section class="checkbox-item">
     		<div class="checkthree">
     			<input type="checkbox" id="checkthree"/>
     			<label for="checkthree"></label>
     		</div>
     	</section>
     	<section class="checkbox-item">
     		<div class="checkfour">
     			<input type="checkbox" id="checkfour"/>
     			<label for="checkfour"></label>
     		</div>
     	</section>
     </div>

.content{
       		margin: 20px auto;
       		width:800px;
       }
       .checkbox-item{
       	display: inline-block;
       	margin:0 20px;
       	border: 1px solid #ccc;
       	width:100px;
       	height:100px;
       	text-align: center;
       }
        /*样式1*/
       .checkone{
       	  position:relative;
          width:80px;
          height:30px;
          margin:35px auto;
          background: #333;
          border-radius:15px; 
          -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
       }
       .checkone:after{
       	 content: "";
       	 position: absolute;
       	 left:14px;
       	 top:14px;
       	 height: 2px;
    	 width: 52px;
   		 background: #111;
   		 border-radius: 50%;
   		 -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
       }
       .checkone input[type="checkbox"]{
       		visibility:hidden; 
       }
       .checkone label{
       	 position: absolute;
       	 width:20px;
       	 height:20px;
       	 background: #f1f1f1;
       	 border-radius:50%;
       	 left:5px;
       	 top:5px;
       	 cursor: pointer;
       	 z-index: 1;
       	 transition: all 0.3s ease;
       }
       .checkone label:after{
       	 content: "";
       	 position: absolute;
       	 width:10px;
       	 height:10px;
       	 background: #333;
       	 border-radius: 50%;
       	 left:5px;
       	 top:5px;
       	  -moz-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
  box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
       }
       #checkone:checked + label{
       	 left:55px;
       }
       #checkone:checked + label:after{
       	background: #00bf00;
       }
       /*样式二*/
       .checktwo{
       	  position:relative;
          width:80px;
          height:26px;
          margin:37px auto;
          background: #333;
          border-radius:13px; 
          -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
       }
       .checktwo input[type="checkbox"]{
       		visibility:hidden; 
       }
       .checktwo label{
          position: absolute;
          width:36px;
          height:20px;
          background: #f1f1f1;
          border-radius: 10px;
          left:2px;
          top:3px;
          cursor: pointer;
          transition: all 0.3s ease;
          z-index:1;
       }
       .checktwo:before{
          content: "ON";
          position: absolute;
          top:0px;
          left:5px;
          color:#00bf00;
          line-height: 26px;
       }
       .checktwo:after{
          content: "OFF";
          position: absolute;
          top:0px;
          right:5px;
          color:#000;
          line-height: 26px;
          text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
       }
       #checktwo:checked+label{
       	 left:42px;

       }
		/*样式3*/
		.checkthree{
			position: relative;
			width:30px;
			height:30px;
            margin:35px auto;
            background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  -moz-border-radius: 50px;
            border-radius:50%;
             box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
		}
		.checkthree input[type="checkbox"]{
			visibility: hidden;
		}
		.checkthree label{
			height:24px;
			width:24px;
			position: absolute;
			top:3px;
			left:3px;
			border-radius: 50%;
			box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
			background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
			cursor: pointer;
		}
		.checkthree label:after{
			content: "";
			position: absolute;
			width:22px;
			height:22px;
			top:1px;
			left:1px;
		    background: linear-gradient(to bottom, #00bf00 0%, #009400 100%);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
			opacity: 0;
			border-radius:50%;
			box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);

		}
		#checkthree:checked+label:after{
			opacity: 1;
		}
		/*样式4*/
		.checkfour{
			position: relative;
			width:30px;
			height:30px;
            margin:35px auto;
            background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  -moz-border-radius: 50px;
            border-radius:50%;
            box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
		}
		.checkfour input[type="checkbox"]{
			visibility: hidden;
		}
		.checkfour label{
			height:24px;
			width:24px;
			position: absolute;
			top:3px;
			left:3px;
			border-radius: 50%;
			box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
			background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
			cursor: pointer;
			overflow: hidden;
		}
		.checkfour label:after{
			content: "";
			position: absolute;
			width:9px;
			height:5px;
			top:7px;
			left:6px;
			opacity: 0;
			border: 3px solid #fcfff4;
   			border-top: none;
    		border-right: none;
			transform: rotate(-45deg);

		}
		
		#checkfour:checked+label:after{
			opacity: 1;
		}

 

转载于:https://my.oschina.net/conqueror/blog/755522