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

选择时：

思路：将复选框隐藏，利用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. SaltStack自动化安装配置haproxy

    准备环境node1:192.168.217.149 (saltstack master)node2:192.168.217.150(saltstack minion)下载haproxy1.6.2.ta ...

  2. 修改Gradle本地仓库

    问题描述 Gradle 默认的本地仓库为 C:\Users\用户名\.gradle,不想让其一直下载东西占用 C 盘资源. 解决方法 新建环境变量名:GRADLE_USER_HOME,变量值为:D:\ ...

  3. redis结合springboot 无法注入redisTemplate问题

    报错: Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean o ...

  4. Microsoft JDBC Driver 使用 getParameterMetaData 会报错？

    不知道为何使用 Microsoft JDBC Driver for SQL Server 驱动时,sql语句不带参数没有问题,但是如果带参数且使用 getParameterMetaData 就会提示某 ...

  5. HDU 2473 Junk-Mail Filter 并查集，虚拟删除操作

    http://acm.hdu.edu.cn/showproblem.php?pid=2473 给定两种操作 第一种是合并X Y 第二种是把X分离出来,就是从原来的集合中分离出来,其它的关系不变. 关键 ...

  6. MySQL复制机制原理

    背景介绍 复制,就是对数据的完整拷贝,说到为什么要复制,首先能想到的是怕数据意外丢失,使得用户蒙受损失. 当完成了数据复制之后,会发现它的优势不止这一点,假如一台机器宕机了,可以启用备份在另一台机器的 ...

  7. POI 博客总结.....

    主键类: HSSFRow row1= sheet.createRow(1); row.createCell(0).setCellValue("学生编号"); row.createC ...

  8. 华为云kafka POC 踩坑记录

    2019/03/08 18:29 最近在进行华为云相关POC验证,个人主要负责华为云DMS kafka相关.大致数据流程是,从DIS取出数据,进行解析处理,然后放入kafka,再从kafka中取出数据 ...

  9. Spring Cloud（2）：搭建Eureka

    Eureka Server的搭建: 使用IDEA工具 File->New Project->Spring Initializr->next Next Next->Next创建即 ...

  10. springboot 学习笔记（七）

    (七)springboot整合activemq,消息消费,以及发送对象消息 1.springboot整合activemq发送消息,上一节已经介绍了,现在要对消息队列中的内容进行处理,下面写一个cons ...