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

选择时：

思路：将复选框隐藏，利用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. Excel去除空行

    本文转载至:https://baijiahao.baidu.com/s?id=1590204478648348952&wfr=spider&for=pc,需要详细信息可链接查看 方法一 ...

  2. 【ACM】孪生素数问题

    孪生素数问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 写一个程序,找出给出素数范围内的所有孪生素数的组数.一般来说,孪生素数就是指两个素数距离为2,近的不能再 ...

  3. mysql 主从复制以及binlog 测试

    ###mysql查看binlog日志内容 https://blog.csdn.net/nuli888/article/details/52106910 mysql的binlog日志位置可通过show ...

  4. B - Average Gym - 101161B 组合数学

    http://codeforces.com/gym/101161/attachments 今天被卡常了,其实是自己对组合数技巧研究的不够. 如果是n, m <= 1e5的,然后取模是质数,那么可 ...

  5. Java文件与io——File类

    概念: File类:表示文件和目录路径名的抽象表示形式. File类可以实现文件的创建.删除.重命名.得到路径.创建时间等等,是唯一与文件本身有关的操作类. 例: public class FileD ...

  6. Hive 基本语法操练（一）：表操作

    Hive 和 Mysql 的表操作语句类似,如果熟悉 Mysql,学习Hive 的表操作就非常容易了,下面对 Hive 的表操作进行深入讲解. **(1)先来创建一个表名为student的内部表** ...

  7. 【Unity3D】用继承EditorUpdater类来实现Editor模式下的后台处理

    EditorWindow类的OnGUI函数只会在窗口焦点处于Editor窗口上的时候才会运行.如果希望焦点不在Editor窗口上的时候,它也能实时更新,可以实现以下方法: OnDestroy OnDe ...

  8. JS展示预览PDF。

    刚好遇到需求,需要在手机端--展示一个电子收据,电子收据返回是PDF格式的,所以需要在前端上面去做PDF预览. 在学习过程中,了解到一种很简单,不需要任何插件的方法做PDF预览,但是这方法有局限性. ...

  9. SpringMVC核心技术---转发和重定向

    @Controller public class Mycontroller { //转发 @RequestMapping("/adduser") public String add ...

  10. MySQL分库分表的技巧

    分表是分散数据库压力的好方法. 分表,最直白的意思,就是将一个表结构分为多个表,然后,可以再同一个库里,也可以放到不同的库. 当然,首先要知道什么情况下,才需要分表.个人觉得单表记录条数达到百万到千万 ...