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

选择时：

思路：将复选框隐藏，利用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. element input搜索框探索

    转(https://blog.csdn.net/qq_37746973/article/details/78402812) 在script中添加下面两个函数 //queryString 为在框中输入的 ...

  2. c# Equals对比忽略大小写

    String.Equals(str1,str2,StringComparison.CurrentCultureIgnoreCase); StringComparison.CurrentCultureI ...

  3. 我在B站学习 Javascript入门教程 基础

    B站av9243452的一系列视频,适合学过其他编程语言的人观看,还挺不错的 共43节,该随笔为1~16节 Js介绍 如需使用外部文件,请在 <script> 标签的 "src& ...

  4. 如何在同一台机器上安装多个MySQL的实例 转

    https://www.cnblogs.com/shangzekai/p/4375271.html 最近由于工作的需要,需要在同一台机器上搭建两个MySQL的实例,(注:已经存在了一个3306的MyS ...

  5. Unity [RequireComponent(typeof(组件名))]

  6. linux 编程笔记 2

    1.使用create建立文件: #include <stdio.h> #include <stdlib.h> #include <fcntl.h> #include ...

  7. linux之sed的用法

    sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为:         sed ...

  8. SpringBoot | 第十五章：基于Postman的RESTful接口测试

    前言 从上一章节开始,接下来的几个章节会讲解一些开发过程中配套工具的使用.俗话说的好,工欲善其事,必先利其器.对于开发人员而言,有个好用的工具,也是一件事半功倍的事,而且开发起来也很爽,效率也会提升很 ...

  9. Pod管理的iOS项目修改工程名

    声明:本文大部分内容来自于以下网址,其余的部分是自己尝试的总结和补充. http://www.jianshu.com/p/5f088acecf64 完整修改iOS工程名1 http://www.cnb ...

  10. Java并发(三):实例引出并发应用场景

    前两篇介绍了一些Java并发的基础知识,博主正巧遇到一种需求:查询数据库,根据查询结果集修改数据库记录,但整个流程是做成了一个schedule的,并且查询比较耗时,并且需要每两分钟执行一次,cpu经常 ...