文档章节

纯CSS设置Checkbox复选框控件的样式

双月通天
 双月通天
发布于 2015/04/15 16:53
字数 2240
阅读 51
收藏 0
点赞 0
评论 0

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框。


在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它。


css-style-checkboxes


查看演示,可以看到我们将要创建的复选框样式。


演示地址


首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。


/**

 * 隐藏默认的checkbox

 */

input[type=checkbox] {

visibility: hidden;

}

隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中。这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框。


样式一


checkbox-one


此复选框风格就像一个解锁滑块,滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮(label标签),将会选中复选框,然后滑块移动到ON位置。


我们开始创建复选框区的HTML。


<section>

  <!-- Checbox One -->

  <h3>Checkbox One</h3>

  <div class="checkboxOne">

  <input type="checkbox" value="1" id="checkboxOneInput" name="" />

 <label for="checkboxOneInput"></label>

  </div>

</section>

因为这个样式的复选框,一个label不足以完成任务,我们用一个DIV元素包含checkbox,我们需要使用它们来做黑色条带和圆角。


/**

 * Create the slider bar

 */

.checkboxOne {

width: 40px;

height: 10px;

background: #555;

margin: 20px 80px;

position: relative;

border-radius: 3px;

}

现在,我们可以把label作为条带上的滑块,我们希望按钮效果是从条带的一侧移动到另一侧,我们可以添加label的过渡。


/**

 * Create the slider from the label

 */

.checkboxOne label {

display: block;

width: 16px;

height: 16px;

border-radius: 50%;

 

-webkit-transition: all .5s ease;

-moz-transition: all .5s ease;

-o-transition: all .5s ease;

-ms-transition: all .5s ease;

transition: all .5s ease;

cursor: pointer;

position: absolute;

top: -3px;

left: -3px;

 

background: #ccc;

}

现在这个滑块在选中(关闭)位置,当我们选中复选框,我们希望有一个反应发生,所以我们可以移动滑块到另一端。我们需要知道,判断复选框被选中,如果是则改变label元素的left属性。


/**

 * Move the slider in the correct position if the checkbox is clicked

 */

.checkboxOne input[type=checkbox]:checked + label {

left: 27px;

}

这就是你需要的第一个Checkbox复选框的CSS。


样式二


checkbox-two


此复选框风格像样式一样,但不同的是,这个滑块按钮会改变颜色。当您单击滑块按钮,它移动到条带的另一边,并改变按钮的颜色。


HTML代码和样式一是完全一样的。


<section>

  <!-- Checbox Two -->

  <h3>Checkbox Two</h3>

  <div class="checkboxTwo">

  <input type="checkbox" value="1" id="checkboxTwoInput" name="" />

 <label for="checkboxTwoInput"></label>

  </div>

</section>

这个DIV会变成比样式一大一些的条带,label依然是作为滑块,使用下面的CSS来定义它。


/**

 * Checkbox Two

 */

.checkboxTwo {

width: 120px;

height: 40px;

background: #333;

margin: 20px 60px;

 

border-radius: 50px;

position: relative;

}

这个样式中间有一个黑色的条,滑块会沿着它左右滑动,但是DIV元素已经使用了,所以我们需要用:before伪类创建一个新的元素。


/**

 * Create the line for the circle to move across

 */

.checkboxTwo:before {

content: '';

position: absolute;

top: 19px;

left: 14px;

height: 2px;

width: 90px;

background: #111;

}

和样式一一样,接下来我们为label写CSS样式,把它用作滑块。


/**

 * Create the circle to click

 */

.checkboxTwo label {

display: block;

width: 22px;

height: 22px;

border-radius: 50%;

 

-webkit-transition: all .5s ease;

-moz-transition: all .5s ease;

-o-transition: all .5s ease;

-ms-transition: all .5s ease;

transition: all .5s ease;

cursor: pointer;

position: absolute;

top: 9px;

z-index: 1;

left: 12px;

background: #ddd;

}

我要实现和样式一差不多的选中状态,当选中时改变label的left和background属性。


/**

 * Create the click event for the checkbox

 */

.checkboxTwo input[type=checkbox]:checked + label {

left: 84px;

background: #26ca28;

}

样式三


checkbox-three


这个复选框的样式比样式二更复杂一些,它和前面的例子一样会左右滑动,并且当改变选中和未选中的状态时,滑块滑动到另一侧并且在原位置显示对应的文本。


首先,我们写HTML代码,这和前面是相同的。


<section>

  <!-- Checbox Three -->

  <h3>Checkbox Three</h3>

  <div class="checkboxThree">

  <input type="checkbox" value="1" id="checkboxThreeInput" name="" />

 <label for="checkboxThreeInput"></label>

  </div>

</section>

然后,我们用相同的方式把div作为滑块,下面的代码会创建一个黑色圆角的条带,我们可以把滑块和文本放到里面。


/**

 * Checkbox Three

 */

.checkboxThree {

width: 120px;

height: 40px;

background: #333;

margin: 20px 60px;

 

border-radius: 50px;

position: relative;

}

当滑块处于未选中状态时,滑块会在左侧,并且右边显示”OFF”,当点击的时候,滑块移动到右侧,左侧显示”ON”。

但是元素数量不足以让我们实现这些功能,所以我们要用:before和:after两个伪类创建两个元素,分别放置”ON”和”OFF”。


/**

 * Create the text for the On position

 */

.checkboxThree:before {

content: 'On';

position: absolute;

top: 12px;

left: 13px;

height: 2px;

color: #26ca28;

font-size: 16px;

}

/**

 * Create the label for the off position

 */

.checkboxThree:after {

content: 'Off';

position: absolute;

top: 12px;

left: 84px;

height: 2px;

color: #ddd;

font-size: 16px;

}

和前面一样,我们来添加滑块的样式,当被点击时它会移动到另一侧,并且改变颜色。


/**

 * Create the pill to click

 */

.checkboxThree label {

display: block;

width: 52px;

height: 22px;

border-radius: 50px;

 

-webkit-transition: all .5s ease;

-moz-transition: all .5s ease;

-o-transition: all .5s ease;

-ms-transition: all .5s ease;

transition: all .5s ease;

cursor: pointer;

position: absolute;

top: 9px;

z-index: 1;

left: 12px;

background: #ddd;

}

 

/**

 * Create the checkbox event for the label

 */

.checkboxThree input[type=checkbox]:checked + label {

left: 60px;

background: #26ca28;

}

样式四


checkbox-four


在这个样式中,我们会创建两个圆形,当点击时改变里面的圆形的颜色表示选中与未选中的状态。

和前面一样的HTML代码。


<section>

  <!-- Checbox Four -->

  <h3>Checkbox Four</h3>

  <div class="checkboxFour">

  <input type="checkbox" value="1" id="checkboxFourInput" name="" />

 <label for="checkboxFourInput"></label>

  </div>

</section>

接下来我们要为checkbox创建外面的圆形,使用CSS的border-radius属性,并且设置为100%就可以创建一个正圆形。


/**

 * Checkbox Four

 */

.checkboxFour {

width: 40px;

height: 40px;

background: #ddd;

margin: 20px 90px;

 

border-radius: 100%;

position: relative;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);

-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);

box-shadow: 0px 1px 3px rgba(0,0,0,0.5);

}

然后我们用label元素来创建一个小一点的圆形,它会根据checkbox状态来改变颜色。


/**

 * Create the checkbox button

 */

.checkboxFour label {

display: block;

width: 30px;

height: 30px;

border-radius: 100px;

 

-webkit-transition: all .5s ease;

-moz-transition: all .5s ease;

-o-transition: all .5s ease;

-ms-transition: all .5s ease;

transition: all .5s ease;

cursor: pointer;

position: absolute;

top: 5px;

left: 5px;

z-index: 1;

 

background: #333;

 

-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);

-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);

box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);

}

当复选框被选中的时候,我们要改变内圈的背景颜色来表示选中状态。


/**

 * Create the checked state

 */

.checkboxFour input[type=checkbox]:checked + label {

background: #26ca28;

}

样式五


checkbox-five


这个复选框的样式有些不同,它看起来只是比浏览器默认的checkbox样式稍微好了些,但是不同的是我们可以根据自己的需要来定义它的样式了。

首先还是一样的HTML代码


<section>

  <!-- Checbox Five -->

  <h3>Checkbox Five</h3>

  <div class="checkboxFive">

  <input type="checkbox" value="1" id="checkboxFiveInput" name="" />

 <label for="checkboxFiveInput"></label>

  </div>

</section>

在前面的例子中,我们把div作为checkbox的滑动条带或者外部的圆圈,但是这一次我们不需要了,可以使用div元素来设置复选框的区域。


/**

 * Checkbox Five

 */

.checkboxFive {

width: 25px;

margin: 20px 100px;

position: relative;

}

label标签用于Click事件和我们要定义的复选框的方框样式。


/**

 * Create the box for the checkbox

 */

.checkboxFive label {

cursor: pointer;

position: absolute;

width: 25px;

height: 25px;

top: 0;

  left: 0;

background: #eee;

border:1px solid #ddd;

}

接下来,我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px x 9px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后,它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下,这样看起来就像是一个对勾。


/**

 * Display the tick inside the checkbox

 */

.checkboxFive label:after {

opacity: 0.2;

content: '';

position: absolute;

width: 9px;

height: 5px;

background: transparent;

top: 6px;

left: 7px;

border: 3px solid #333;

border-top: none;

border-right: none;

 

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

}

在上面的CSS中,我们已经设置它的透明度为0.2,所以你会看到的复选框有一个半透明的对勾。你可以在悬停的时候加深一点,在选中时,可以把设置为不透明。


/**

 * Create the hover event of the tick

 */

.checkboxFive label:hover::after {

opacity: 0.5;

}

 

/**

 * Create the checkbox state for the tick

 */

.checkboxFive input[type=checkbox]:checked + label:after {

opacity: 1;

}

这将会为你创建全新的checkbox复选框样式。

观看演示,看看这些复选框是如何工作的。


演示地址


本文翻译自 How To Style A Checkbox With CSS

自定义select样式 Selectyze jquery plugin – Skin your own selects lists with jQuery & CSS

拓展阅读 CSS3 Checkbox Styles


本文转载自:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml

共有 人打赏支持
双月通天
粉丝 35
博文 166
码字总数 208088
作品 0
徐汇
程序员
4.4、Bootstrap V4自学之路------组件---表单

表单控件 下面是一个Bootstrap支持的表控件以及自定义类的完整列表。额外的文档对每个组都是可用的。 类 作用 支持的变量 表单控件的任一组 用在任何块级元素上,比如说或 文本域控件 、 、、...

Asktao ⋅ 2016/03/23 ⋅ 0

11 款 jQuery 的复选框和单选框美化插件

作者:Chris Spooner 翻译:Terry li - GBin1.com 英文: jQuery Plugins for Styling Checkbox & Radio Buttons web开发中所有的输入控件中复选框和单选框的样式是最难去设计的,因为不同的...

小编辑 ⋅ 2011/07/13 ⋅ 9

推荐11款jQuery开发的复选框和单选框美化插件

作者:Chris Spooner 翻译:Terry li - GBin1.com 英文: jQuery Plugins for Styling Checkbox & Radio Buttons web开发中所有的输入控件中复选框和单选框的样式是最难去设计的,因为不同的...

gbin1 ⋅ 2011/07/02 ⋅ 2

css样式之区分input是按钮还是文本框的方法

对设置样式时怎么区分input是按钮还是文本框问题的技术调查——把input里面的东西剔出来 当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?...

wankaiming ⋅ 2010/11/25 ⋅ 0

Bootstrap 表单

在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标记和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默...

wybo521 ⋅ 2016/01/26 ⋅ 0

HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接相关标签,实现图文并茂的页面 (4...

别叫小伙 ⋅ 2016/09/03 ⋅ 0

CSS3复选和单选样式工具--Magic-Input

CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo 源码:https://github.com/dcsite/magic-input 使用 $ npm install magic-input 你需要引入 dist/magic-input.css或者d...

同一种调调 ⋅ 2016/04/29 ⋅ 2

ExtJS带复选框的下拉树对复选框中半选状态的实现

Extjs基本组件:带复选框的下拉树 首先,我们对于ExtJs实现的带复选框的下拉树应该有一个简单的了解,从下面的例子中可以看出,treepanel是通过节点中checked的值(true,false)来实现复选框...

海礁 ⋅ 2016/10/28 ⋅ 0

Bootstrap 表单和图片

表单 Bootstrap 提供了一些丰富的表单样式供开发者使用。 1.基本格式 //实现基本的表单样式 电子邮件 密码

菜鸟不菜么 ⋅ 05/10 ⋅ 0

11个jQuery表单元素美化插件

因为浏览器兼容性的原因,表单元素往往是整个网页设计过程中最难以美化的,尤其是单选按钮、下拉选择框和复选框。不过我们可以通过jquery来美化它样。下面为大家推荐11个简单易用的jQurey插件...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud构建微服务架构—创建“服务注册中心”

创建一个基础的Spring Boot工程,命名为eureka-server,并在pom.xml中引入需要的依赖内容: <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par......

itcloud ⋅ 20分钟前 ⋅ 0

拖动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event</title> <style> #box { width: 100px; height: 100px; background-color: aquamarine; position: absolute; } </style......

fyliujj ⋅ 23分钟前 ⋅ 0

es6 polyfill array

polyfill之javascript函数的兼容写法——Array篇 1. Array.isArray(obj) if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[objec......

球球 ⋅ 25分钟前 ⋅ 0

kibana启动异常

检查一下:kibana.yml 每一对key:value中,冒号之后应有空格。

增删改查1 ⋅ 27分钟前 ⋅ 0

js修改img的src属性刷新图片时的图片缓存问题

问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过...

HaierBrother ⋅ 27分钟前 ⋅ 0

Mysql

1.Jdbc Url 设置allowMultiQueries为true和false mysql的批量更新是要我们主动去设置的, 就是在数据库的连接url上设置一下,加上* &allowMultiQueries=true *即可。 参数名称 参数说明 缺省...

瑟青豆 ⋅ 30分钟前 ⋅ 0

mysql导出导入表结构与数据

当我们需要进行数据迁移时,mysql自带的mysqldump会是最好的方式。 1.导出某张表的结构和数据 首先,我们应当使用服务器,打开终端,连接到所需要导出的表所在的服务器上。执行命令: mysqld...

hengbao5 ⋅ 31分钟前 ⋅ 0

世界杯也走向“比拼”大数据的时代

《日本经济新闻》6月19日报道称,俄罗斯足球世界杯已于6月14日揭开战幕。作为第21次举办的足球世界杯,如何活用大数据有可能成为决定各支球队胜负的重要因素。从对阵球队的分析到战术建议,还...

加米谷大数据 ⋅ 31分钟前 ⋅ 0

金额转为千分制,金额转中文大写

金额转关为大写 /** 数字金额大写转换(可以处理整数,小数,负数) */ function digitUppercase(n){ if(!n) reutrn "" let fraction = ['角', '分']; let digit = [...

YXMBetter ⋅ 34分钟前 ⋅ 0

开发利器JRebel部署SpringBoot项目

不要以为年纪轻轻就跌倒了人生谷底,未来还有更大的下降空间等着你。 idea下载和安装JRebel 激活JRebel 访问https://my.jrebel.com/ 使用facebook或twitter登录 勾选 Build project automati...

郑龙飞 ⋅ 40分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部