复选框checkbox实现自定义样式

简介: 复选框checkbox实现自定义样式

在实际开发中,时长会遇到这样的问题,checkbox默认的样式有点难看,很多的时候,会更具ui设计图,来改变相应的checkbox的样式,这个时候就可以自定义一个样式了。


方法很简单,首先讲默认的checkbox样式隐藏起来,在用两张准备好的图片(选中状态的图片和未选中的图片)作为复选框checkbox的背景图片就行了。

参考代码:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>复选框checkbox自定义样式</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            input[type=checkbox]{
                    appearance:none;
                    -moz-appearance:none; /* Firefox */
                    -webkit-appearance:none;                 
                    cursor: pointer;
                    margin:0;
                }                   
                input[type=checkbox]{
                    width:13px;
                    height:13px;                  
                    background: url(images/check.png);
                    background-size: 100% 100%;
                }           
                input[type=checkbox]:checked{
                    background: url(images/checked.png);
                    background-size: 100% 100%;
                }
    </style>
    </head>
    <body>
        <div class="modal-body form">
            <div class="col-md-7 col-sm-7  col-xs-7">
                <input name="circle" type="checkbox" value="2" />周一
                <input name="circle" type="checkbox" value="3" />周二
                <input name="circle" type="checkbox" value="4" />周三
                <input name="circle" type="checkbox" value="5" />周四
                <input name="circle" type="checkbox" value="6" />周五
                <input name="circle" type="checkbox" value="7" />周六
                <input name="circle" type="checkbox" value="1" />周日             
            </div>
        </div>
    </body>
</html>

这个时候就能达到自己想要的样式的效果了。

相关文章
|
7月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
205 1
|
6月前
|
JavaScript
使用layui checkbox复选框样式实现单选功能
使用layui checkbox复选框样式实现单选功能
422 0
|
7月前
|
移动开发 JavaScript 小程序
uView Checkbox 复选框
uView Checkbox 复选框
149 0
50zTree - 带 radio 的单选下拉菜单
50zTree - 带 radio 的单选下拉菜单
52 1
表单单选框,多选框美化
之前总是匆匆看过,如今终于知道该怎么搞了。。。 **利用label挂钩checkbox的特点来实现。 当html代码中,label的for属性值和checkbox的id值一样的时候,label就可以控制checkbox的选择了。
36 0
layui的复选框怎么设置只能单选
layui的复选框怎么设置只能单选
单选、全选、反选、获得所有选中的checkbox
单选、全选、反选、获得所有选中的checkbox
49zTree - 带 checkbox 的多选下拉菜单
49zTree - 带 checkbox 的多选下拉菜单
41 0
|
JavaScript 前端开发
layui复选框checkbox全选和获取值的解决方案
layui复选框checkbox全选和获取值的解决方案
1075 0
|
JavaScript
element checkbox复选框实现全选功能
element checkbox复选框实现全选功能