用CSS创建自定义样式的复选框(checkbox)

标签: csscheckbox自定义   时间:2017-11-03
我们可以使用css来制作各种各样好看的元素样式,本文章向大家介绍使用CSS创建自定义样式的复选框(checkbox),需要的朋友可以参考一下。

在CSS中,我们有许多方法来绘制我们想要东西。在表单form中,有的很简单,但有的很复杂。文本输入框input很简单,但是复选框和单选按钮很难使用CSS进行自定义样式。在本教程中,我将向您展示如何对这些input进行自定义风格设计。

 

复选框(checkbox)自定义样式

一 实现思路

纯css实现的主要手段是利用label标签的模拟功能。labelfor属性可以关联一个具体的input元素,即使这个input本身不可被用户可见,有个与它对应的label后,用户可以直接通过和label标签交互来替代原生的input——而这给我们的样式模拟留下了空间。简而言之就是

隐藏原生input,样式定义的过程留给label (那为什么不直接改变checkbox的样式?因为checkbox作为浏览器默认组件,样式更改上并没有label那么方便,很多属性对checkbox都是不起作用的,比如background,而label在样式上基本和div一样'任人宰割')

而在选择事件上,由于css的“相邻选择符(E+F)”的存在,让我们可以直接利用html的默认checkbox,免去了js模拟选择的麻烦。

 

二 实现代码

代码如下:

<style>
input[type=checkbox]{
  cursor: pointer;
}
input[type=checkbox]:checked:before {
content: "\2713";
    background: #fffed5;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 20px;
    text-align: center;
    line-height: 8px;
    display: inline-block;
    width: 13px;
    height: 15px;
    color: #00904f;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    margin: -3px -3px;
    text-indent: 1px;
}
input[type=checkbox]:before {
content: "\202A";
    background: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 20px;
    text-align: center;
    line-height: 8px;
    display: inline-block;
    width: 13px;
    height: 15px;
    color: #00904f;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    margin: -3px -3px;
    text-indent: 1px;
}
</style>
<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox"id="id2">

在线运行

运行结果

用CSS创建自定义样式的复选框(checkbox)

原文地址:http://www.manongjc.com/article/2204.html