CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

概述在原来有一篇文章写到了《CSS效果篇--纯CSS+HTML实现checkbox的思路与实例》。 今天这篇文章主要写各种自定义的checkbox复选框，实现如图所示的复选框： 大致的html代码都如下所

在原来有一篇文章写到了《CSS效果篇--纯CSS+HTML实现checkbox的思路与实例》。

今天这篇文章主要写各种自定义的checkBox复选框，实现如图所示的复选框：

大致的@R_404_5140@都如下所示：

<div class="ondisplay">  section Title=".slIDeOne">    ="slIDeOne">        input type="checkBox" value="None" ID="slIDeOne" name="check" checked />      label for></label</divsection>>

那么对应的CSS代码：

 

body {  background: #555;  Font-family: 'Open Sans',sans-serif;  Font-weight: 300;}body h1,body h2 {  color: #eee;  Font-size: 30px;  text-align: center;  margin: 20px 0 50px 0;  -webkit-font-smoothing: antialiased;  text-shadow: 0px 1px black;}body .ondisplay {  border-bottom: 1px solID gray;  padding: 20px 0;}body .ondisplay section {  wIDth: 100px;  height:  display: inline-block;  position: relative;  margin-top: 5px;  border:  -moz-border-radius:  -webkit-border-radius:  border-radius:  -moz-Box-shadow: 0 1px 4px rgba(0,0.3),0 0 40px rgba(0,0.1) inset;  -webkit-Box-shadow:  Box-shadow:body .ondisplay section:before {  content: 'click it'; #bbb; 12px; 400;body .ondisplay section:after { attr(Title); absolute; 100%;  left: 0;  bottom: 3px; #fff; 0px 1px black;}

第一种实现如图所示：

@R_404_5140@：

<!-- .slIDeOne -->     end .slIDeOne -->  >

CSS代码：

/**/.slIDeOne { 50px; 10px; #333; 20px auto; inset 0px 1px 1px rgba(0,0.5),0px 1px 0px rgba(255,0.2);.slIDeOne label { block; 16px;  top: -3px;  cursor: pointer; #fcfff4; -moz-linear-gradIEnt(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%); -webkit-linear-gradIEnt(top,1)"> linear-gradIEnt(to bottom,1)"> 0px 2px 5px 0px rgba(0,0.3);  -moz-Transition: all 0.4s ease;  -o-Transition:  -webkit-Transition:  Transition: all 0.4s ease;}.slIDeOne input[type=checkBox] {  visibility: hIDden;}.slIDeOne input[type=checkBox]:checked + label { 37px;}

第二种实现如图所示：

@R_404_5140@：

=".slIDeTwo" .slIDeTwo ="slIDeTwo"="slIDeTwo" end .slIDeTwo -->.slIDeTwo { 80px;.slIDeTwo:after { ''; 14px; 2px; 52px; #111;.slIDeTwo label { 22px; 4px;  z-index: 1;.slIDeTwo label:after { 6px; inset 0px 1px 1px black,0.9);.slIDeTwo input[type=checkBox] {.slIDeTwo input[type=checkBox]:checked + label { 54px;}.slIDeTwo input[type=checkBox]:checked + label:after { #00bf00;}*/

第三种实现如图所示：

@R_404_5140@：

=".slIDeThree" .slIDeThree ="slIDeThree"="slIDeThree" end .slIDeThree .slIDeThree { 26px;.slIDeThree:after { 'OFF'; #000;  right:  Font: 12px/26px Arial,1)"> bold; 1px 1px 0px rgba(255,0.15);}.slIDeThree:before { 'ON'; #00bf00; bold;}.slIDeThree label { 34px; 20px;.slIDeThree input[type=checkBox] {.slIDeThree input[type=checkBox]:checked + label { 43px;}*/

第四种实现如图所示：

@R_404_5140@：

=".roundedOne" .roundedOne ="roundedOne">      ="roundedOne" end .roundedOne .roundedOne { 28px; inset 0px 1px 1px white,0px 1px 3px rgba(0,0.5);.roundedOne label {;.roundedOne label:after {  filter: progID:DXImagetransform.Microsoft.Alpha(Opacity=0);  opacity:.roundedOne label:hover::after { progID:DXImagetransform.Microsoft.Alpha(Opacity=30); 0.3;}.roundedOne input[type=checkBox] {.roundedOne input[type=checkBox]:checked + label:after { progID:DXImagetransform.Microsoft.Alpha(enabled=false); 1;}*/

第五种实现如图所示：

@R_404_5140@：

=".roundedTwo" .roundedTwo ="roundedTwo"="roundedTwo" end .roundedTwo .roundedTwo {.roundedTwo label {.roundedTwo label:after { 9px; 3px solID #fcfff4;  border-top: none;  border-right: transparent;  -moz-transform: rotate(-45deg);  -ms-transform:  -webkit-transform:  transform: rotate(-45deg);}.roundedTwo label:hover::after {.roundedTwo input[type=checkBox] {.roundedTwo input[type=checkBox]:checked + label:after {*/

第六种实现如图所示：

@R_404_5140@：

=".squaredOne" .squaredOne ="squaredOne"="squaredOne" end .squaredOne .squaredOne {.squaredOne label {.squaredOne label:after { 0;}.squaredOne label:hover::after {.squaredOne input[type=checkBox] {.squaredOne input[type=checkBox]:checked + label:after {*/

第七种实现如图所示：

@R_404_5140@：

=".squaredTwo" .squaredTwo ="squaredTwo"="squaredTwo" end .squaredTwo .squaredTwo {.squaredTwo label {.squaredTwo label:after {.squaredTwo label:hover::after {.squaredTwo input[type=checkBox] {.squaredTwo input[type=checkBox]:checked + label:after {*/

第八种实现如图所示：

@R_404_5140@：

=".squaredThree" .squaredThree ="squaredThree"="squaredThree" end .squaredThree .squaredThree { 20px auto;}.squaredThree label {;}.squaredThree label:after {.squaredThree label:hover::after {.squaredThree input[type=checkBox] {.squaredThree input[type=checkBox]:checked + label:after {*/

第九种实现如图所示：

@R_404_5140@：

=".squaredFour" .squaredFour ="squaredFour"="squaredFour" end .squaredFour .squaredFour {.squaredFour label {.squaredFour label:after { 3px solID #333;.squaredFour label:hover::after { progID:DXImagetransform.Microsoft.Alpha(Opacity=50); 0.5;}.squaredFour input[type=checkBox] {.squaredFour input[type=checkBox]:checked + label:after {*/

总结，所有自定义checkBox代码如下：

<!DOCTYPE HTMLHTMLheadMeta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0,minimum-scale=1.0,maximum-scale=5.0,user-scalable=no"/>charset="utf-8"="keywords"="" ="description"/> style>body {  background: #555;  Font-family  Font-weight 300;}  color #eee  Font-size 30px  text-align center  margin 20px 0 50px 0  -webkit-font-smoothing antialiased  text-shadow 0px 1px blackbody .ondisplay   border-bottom 1px solID gray  padding 20px 0body .ondisplay section   wIDth 100px  height  display inline-block  position relative  margin-top 5px  border  -moz-border-radius  -webkit-border-radius  border-radius  -moz-Box-shadow  -webkit-Box-shadow  Box-shadowbody .ondisplay section:before   content 'click it' #bbb 12px 400body .ondisplay section:after  attr(Title) absolute 100%  left 0  bottom 3px #fff}/* .slIDeOne */.slIDeOne  50px 10px #333 20px auto.slIDeOne label  block 16px  top -3px  cursor pointer #fcfff4  -moz-Transition all 0.4s ease  -o-Transition  -webkit-Transition  Transition.slIDeOne input[type=checkBox]   visibility hIDden.slIDeOne input[type=checkBox]:checked + label  37px end .slIDeOne */ .slIDeTwo .slIDeTwo  80px.slIDeTwo:after  '' 14px 2px 52px #111.slIDeTwo label  22px 4px  z-index 1.slIDeTwo label:after  6px.slIDeTwo input[type=checkBox] .slIDeTwo input[type=checkBox]:checked + label  54px.slIDeTwo input[type=checkBox]:checked + label:after  #00bf00 end .slIDeTwo  .slIDeThree .slIDeThree  26px.slIDeThree:after  'OFF' #000  right  Font bold.slIDeThree:before  'ON'.slIDeThree label  34px 20px.slIDeThree input[type=checkBox] .slIDeThree input[type=checkBox]:checked + label  43px end .slIDeThree  .roundedOne .roundedOne  28px.roundedOne label .roundedOne label:after   filter progID:DXImagetransform.Microsoft.Alpha(Opacity=0)  opacity.roundedOne label:hover::after  progID:DXImagetransform.Microsoft.Alpha(Opacity=30) 0.3.roundedOne input[type=checkBox] .roundedOne input[type=checkBox]:checked + label:after  progID:DXImagetransform.Microsoft.Alpha(enabled=false) end .roundedOne  .roundedTwo .roundedTwo .roundedTwo label .roundedTwo label:after  9px 3px solID #fcfff4  border-top none  border-right transparent  -moz-transform rotate(-45deg)  -ms-transform  -webkit-transform  transform.roundedTwo label:hover::after .roundedTwo input[type=checkBox] .roundedTwo input[type=checkBox]:checked + label:after  end .roundedTwo  .squaredOne .squaredOne .squaredOne label .squaredOne label:after .squaredOne label:hover::after .squaredOne input[type=checkBox] .squaredOne input[type=checkBox]:checked + label:after  end .squaredOne  .squaredTwo .squaredTwo .squaredTwo label .squaredTwo label:after .squaredTwo label:hover::after .squaredTwo input[type=checkBox] .squaredTwo input[type=checkBox]:checked + label:after  end .squaredTwo  .squaredThree .squaredThree .squaredThree label .squaredThree label:after .squaredThree label:hover::after .squaredThree input[type=checkBox] .squaredThree input[type=checkBox]:checked + label:after  end .squaredThree  .squaredFour .squaredFour .squaredFour label .squaredFour label:after  3px solID #333.squaredFour label:hover::after  progID:DXImagetransform.Microsoft.Alpha(Opacity=50) 0.5.squaredFour input[type=checkBox] .squaredFour input[type=checkBox]:checked + label:after  end .squaredFour *   Box-sizing border-Box}bodyh1>CSS3 CheckBox Styles>>  >

 

总结

以上是内存溢出为你收集整理的CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框全部内容，希望文章能够帮你解决CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。