自定义复选框样式

难题

CSS最初出现时,对表单元素的样式控制力有限。不过近年来,各种浏览器逐步放开CSS属性对变单控件的作用范围。从而设置大多数表单控件的样。
不过单选框和复选框不在此例,这两个控件绝大多数浏览器无法设置样式。


解决方案

通过label 标签的:before伪元素实现。

当<label>元素与复选框关联后,点击label标签同样能触发事件。

通过对伪元素的美化实现复选框。

1.HTML代码如下

<input id="checkbox1" type="checkbox" value="1"/>
<label for="checkbox1"> 测试 </label> 

2.美化伪元素代码如下

input[type="checkbox"] + label::before{
    content: '\a0'; /* 不换行空格*/
    display:inline-block;
    vertical-align: -1px;
    width: 15px;
    height:15px;
    margin-right:5px;
    border-radius: 3px;
    background: silver;
    text-indent: 2px;
    line-height:16px;
}

显示效果如下
初始.jpeg

3.设置选中状态

input[type="checkbox"]:checked + label::before{
    content:'\2713';
    background: yellowgreen;
}

4.将复选框 隐藏起来。不能设置 display:none ,会将它从tab键切换焦点的队列中删除。

代码如下

input[type="checkbox"] {
    position: absolute;
    clip: rect(0,0,0,0);
}

5.设置获取焦点和禁用状态样式

input[type="checkbox"]:focus + label::before{
    box-shadow:0 0 2px 2px #58a;
}
input[type="checkbox"]:disabled + label::before{
    background: gray;
    box-shadow:none;
    color:#555;
} 

这样就完成了checkbox的美化。
最终样式如下:


默认.jpg
选中.jpg
获取焦点.jpg

这样就完成了checkbox的美化。
可以通过类似的设置创建一个开关按钮。(checkbox隐藏,修改label样式)

html

<input id="switch" type="checkbox" class="switch">
<label for="switch">提交<label/>

CSS

<style>
    input[class="switch"] {
        position:absolute;
        clip: rect(0,0,0,0);
    }
    
    input[class="switch"]+ label {
        width:65px;
        display: inline-block;
        background:#ccc;
        background: linear-gradient(#ddd,#bbb);
        border: 1px solid rgba(0,0,0, 0.1);
        border-radius:5px;
        text-align: center;
        text-shadow: 0 1px 1px white
    }
    
    input[class="switch"]:checked+ label,
    input[class="switch"]:active+ label {
        box-shadow: 1px 1px 1px rgba(0,0,0,0.3) inset;
        border-color:rgba(0,0,0,0.4);
        background: #bbb;
    }
</style>

效果图:


switch.jpg
switch-click.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,951评论 3 184
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,331评论 0 5
  • Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站...
    mhy_web阅读 7,780评论 0 0
  • 很多人都会说我要改变,我想要改变,我不想不自信,我不想过重复的生活,我不想过…… 你付出过吗?你行动过吗? 如果你...
    唯吾德昕阅读 197评论 0 0
  • 已经有将近半年没有带贝贝出门溜达了。 今天天气不错。虽然已经入冬,但是南方的冬天向来不够雷厉风行,总是一次次失败,...
    笑笑竹笋妹阅读 466评论 0 1