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

HTML 前端之家
前端之家收集整理的这篇文章主要介绍了CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

大致的HTML代码都如下所示：

<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;
}

第一种实现如图所示：

HTML代码：

<!-- .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;
}

第二种实现如图所示：

HTML代码：

=".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;
}

*/

第三种实现如图所示：

HTML代码：

=".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;
}

*/

第四种实现如图所示：

HTML代码：

=".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;
}

*/

第五种实现如图所示：

HTML代码：

=".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 {*/

第六种实现如图所示：

HTML代码：

=".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 {*/

第七种实现如图所示：

HTML代码：

=".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 {*/

第八种实现如图所示：

HTML代码：

=".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 {*/

第九种实现如图所示：

HTML代码：

=".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 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
  -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}

/* .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>

>

  >

 

原文链接：/html/994343.html

猜你在找的HTML相关文章

elasticsearch扩展ik分词器词库
操作步骤 1、进入elasticsearch的plugin，进入ik。进入config。 2、在config下面建立以.di...
echarts中legend如何换行
lengend data数据中若存在&#39;&#39;，则表示换行，用&#39;&#39;切割。
Echart常用效果（一）
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { t...
freemarker中js里面取字符串，换行导致报错的解决办法
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var d...
Freemarker + xml 实现Java导出word
前言 最近做了一个调查问卷导出的功能，需求是将维护的题目，答案，导出成word，参考了几种...
【前端JSP思考】JSP中#{},${}和%{}的区别
JSP中#{},${}和%{}的区别： # #{}：对语句进行预编译，此语句解析的是占位符?，可以防止SQ...
【前端HTML】常用标签及属性
对于很多人来说，用HTML标签都是熟能生巧，而不清楚为什么是那样的标签，所以我在这列了一...
[前端]GOFLY项目-响应式登录页的设计和实现
登录界面如果要实现响应式 , 需要注意宽度的设置和media query的使用 宽度一般都是按百分比...
[前端] 设定为disabled的表单域值不能被提交
表单中的某个表单域被设定为disabled，则该表单域的值就不会被提交。 但是我们需要提交这个...
[前端] 代码中执行绑定元素的指定事件trigger方法
前面业务里有个搜索功能 , 入口比较深 , 现在想要把入口挪到有公共header的地方 , 在不想完...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作