此方法可以将复选框的默认样式替换成任意样式。如图： 
未选择：

选择时：

思路：将复选框隐藏，利用lebal元素的焦点传递特性，用lebal的样式替代复选框。

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>checkbox css change</title>

<style type="text/css">

input[type="checkbox"] + label {

    cursor: pointer;

    font-size: 1em;

}

[id^="checkbox-"] + label {

    background-color: #ffffff;

    border: 1px solid #666666;

    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);

    padding: 9px;

    border-radius: 3px;

    display: inline-block;

    vertical-align: middle;

}

[id^="checkbox-"] + label:active {

    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

}

[id="checkbox-1"]:checked + label {

    background-color: #F47164;

    border: 1px solid #F47164;

}

[id="checkbox-2"]:checked + label {

    background-color: #84CBC5;

    border: 1px solid #84CBC5;

}

[id="checkbox-3"]:checked + label {

    background-color: #F8D25D;

    border: 1px solid #F8D25D;

}

</style>

</head>

<body>

    <label style="margin-left: 55px; margin-right: 16px;">状态:</label>

    <input type="checkbox" value="0" class="check_view_state"

        id="checkbox-1" style="display: none;">

    <label for="checkbox-1"></label>

    <span class="status">未读</span>

    <input type="checkbox" value="1" class="check_view_state"

        id="checkbox-2" style="display: none;">

    <label for="checkbox-2"></label>

    <span class="status">已读</span>

    <input type="checkbox" value="2" class="check_view_state"

        id="checkbox-3" style="display: none;">

    <label for="checkbox-3"></label>

    <span class="status">未授权</span>

</body>

</html>

HTML复选框checkbox默认样式修改的更多相关文章

  1. input复选框checkbox默认样式纯css修改

    修改之前的样式  修改之后的样式 html <input type="checkbox" name="btn" id="btn1"&g ...

  2. css_input[checked]复选框去掉默认样式并添加新样式

    效果对比: “\2713”实体符号√ :如有兴趣查看详细实体符号请点这里 代码实现: <!DOCTYPE html> <html> <head> <meta ...

  3. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

  4. 纯CSS3来自定义单选框radio与复选框checkbox

    单选框(radio)自定义样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  5. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  6. 复选框checkbox——用背景图片替换样式

    input { border : none; display : inline-block; width : 25px; height : 25px; -webkit-apearance : none ...

  7. 安卓开发：UI组件-RadioButton和复选框CheckBox

    2.5RadioButton 为用户提供由两个及以上互斥的选项组成的选项集. 2.5.1精简代码 在按钮变多之后,多次重复书写点击事件有些繁琐,我们在这里创建一个事件OnClick,每次点击时调用该事 ...

  8. easyui的combobox将得到的数据设定为下拉框默认值和复选框设定默认值

    通过easyui做了一个表,表里是从数据库拿到的数据. 现在双击某一行,通过点击行的id取到这一行的所有数据,现在需要修改这些得到的数据, 其中部分数据是<select>这个选择的, 问题 ...

  9. php一些单选、复选框的默认选择方法（示例）

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

随机推荐

  1. Zabbix之CentOS7.3下yum安装Zabbix3.5

    Zabbix特点介绍 (此介绍来源于https://www.zabbix.com/documentation/3.4/zh/manual/introduction/features) 概述Zabbix ...

  2. angular双向绑定与单向绑定的写法区别

    [ngModel]="manualCode" (ngModelChange)="manualCode=$event;" 等价于下面这样的写法: [(ngMode ...

  3. BZOJ 1924 && Luogu P2403 [SDOI2010]所驼门王的宝藏 恶心建图+缩点DP

    记住:map一定要这么用: if(mp[x[i]+dx[j]].find(y[i]+dy[j])!=mp[x[i]+dx[j]].end()) add(i,mp[x[i]+dx[j]][y[i]+dy ...

  4. sparkSQL元数据缓存不同步 beeline连接的表结构与hive不一致

    之前遇到过的坑,通过beeline连接spark thirft server,当在Hive进行表结构修改,如replace/add/change columns后,表结构没有变化,还是旧的表结构,导致 ...

  5. JS——操作元素属性

    属性的操作包括:读和写 方法: 1)”.“操作 2)”[ ]“操作 eg: var oDiv = document.getElementById('div1'); var attr = 'color' ...

  6. python入门之进程与线程

    什么是进程.线程 进程:一个整体的形式暴露给操作系统管理,里面包含对各种资源的调用,内存的管理,网络接口的调用等,对各种资源管理的基本单位. 线程:操作系统最小的调度单位, 是一串指令的集合,进程中的 ...

  7. Python metaclasses

    metaclasses元类:就像对象是类的实例一样,类是它的元类的实例.调用元类可以创建类. metaclass使用type来创建类,type可以被继承生成新的元类. 这个和C#的反射很相似. 下面是 ...

  8. No lease on /目录: File does not exist. [Lease. Holder: DFSClient_NONMAPREDUCE_-2059237550_1, pendingcreates: 8]错误及解决方法

    感觉程序员的世界真是一个变幻无常且精彩绝伦的世界,每次跑程序都会发现不一样的问题.今天跑MapReduce程序来统计邮箱次数时遇到了一个问题,明明一样的代码,别人能跑,我却跑不了.我相信,基本做这行的 ...

  9. docker~aspnetcore2.0镜像安装软件的加速器

    一般对于安装软件加速时,我们大多数会选择阿里云,而对于aspnetcore2.0这个进项来说,由于使用的是Debian操作系统,所有我们要找到它对应的mirror列表,下面是我整理的一个sources ...

  10. Shell笔试题3

    1.查找当前目录中所有大于500M的文件,把这些文件名写到一个文本文件中,并统计其个数.find ./ -size +500M -type f | tee file_list | wc -l 2.在目 ...