简易复选框样式设置

主要是

<input type="checkbox" id="checkbox-1" />
<label for="checkbox-1">Check?</label>

#checkbox-1 {
    display: none;
}
#checkbox-1 + label {
    color: red;
}
#checkbox-1:checked + label {
    color: blue;
}

自己写的

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <style type="text/css">
        #checkbox-1 {
            display: none;
        }
        #checkbox-1 + label {
            background-image: url(check_null.png);
            background-position: 0 0;
            border: 0;
            background-size: 14px 14px;
        }
        #checkbox-1:checked + label {
            background-image: url(check_all.png);
            background-position: 0 0;
            border: 0;
            background-size: 14px 14px;
        }
        label {
            width: 14px;
            height: 14px;
            display: block;
        }
    </style>
</head>
<body>
    <input type="checkbox" id="checkbox-1" />
    <label for="checkbox-1"></label>
    <script type="text/javascript">
        $(‘#checkbox-1‘).change(function () {
            if($("#checkbox-1").is(‘:checked‘)) {
                console.log(‘abc‘)
            }
        })
    </script>
</body>

时间： 2024-08-13 19:17:26

简易复选框样式设置的相关文章

纯CSS自定义Html中Checkbox复选框样式

原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变它的外观. 要做到这一点需要添加一段代码到你的CSS文件中. /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有

移动开发不能不知道的事- css3复选框样式自定义

样式化复选框(Styling Checkbox) 复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 选中状态未选状态这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览器才支持对这类控件应用样式,比如拿到这样一张设计图: blue.png 在过去,想要通过简单地修改样式达成这种设计效果根本不行,不过,现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能

CSS定义Radio单选项和Checkbox复选框样式有效代码

我们都知道一般情况利用css来定义Radio单选项和Checkbox复选框样式是无效的,下面我来给大家介绍利用CSS定义Radio单选项和Checkbox复选框样式,有需要了解的朋友可参考. 完全使用css来实例复制代码代码如下: <style type=”text/css”> form#form1 {font:12px tahoma,sans-serif} input[type="checkbox"] {visibility:hidden;width:0;height

自定义复选框样式及全选操作

自定义复选框样式复选框结构 input框去其样式宽高为0;定位到父盒子内,我们需用其:checked 属性下面的span为自定义样式,定位到父盒子内 . 效果展示 js 代码模拟复选框样式 $(".ck_MN").click(function(){ var ck_Inp = $(this).siblings(".ckIpt"); var Ck_box = $(this).parents(".Ckbox"); if(ck_Inp.prop(&

改变input复选框样式

在网页设计中由于无法设置input框的样式很多时候会使用图片代替,今天在<css揭秘>一书中看到关于input样式框的修改,感觉很有启发,所以提供给广大开发者,希望有所帮助. 具体思路使用一个label标签来将input复选框给遮盖住,同时使用input的checked属性实现样式变换. css代码 input+.label:before { display: inline-block; margin-right: 5px; content: "\a0"; /*不换行空格*

纯CSS修改checkbox复选框样式

借鉴网友博客, 改用后整理收录效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box_inner1{ width: 25px; margin: 20px 100px; /*最外层盒子的外边距, 可自己调*/ position:

Qt树形控件QTreeView使用1——节点的添加删除操作复选框的设置

QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有mvc的特点). 1. QStandardItemModel在QTreeView中的使用使用QTreeView的对应模型是QStandardItemModel,这个是Qt对应ui界面最有用的模型,它可以用于树形控件.列表控件.表格控件等等和条目有关的控件.QStandardItemModel用于列表

复选框样式自定义

一.HTML部分 <label class="check_list i_check"> <input name="checkbox" type="checkbox" class="checkbox"> </label> 二.CSS部分 .check_list{ float: left; } .checkbox{ opacity: 0; filter:alpha(opacity=0); cur

自学篇之-----纯css做的漂亮的单选框复选框样式

<!DOCTYPE html><html><head><title>checkbook</title><meta charset="utf-8" /><script type="text/javascript" src="jquery-1.10.2.min.js"></script> <style type="text/css"