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

选择时：

思路：将复选框隐藏，利用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. thinkphp5.1composer引入第三方类库使用注意

    下面以引入phpspider为例子: composer引入: composer require owner888/phpspider 这时在vender目录下会多出一个owner888目录,里面就有我 ...

  2. Webpack+Vue构建项目

    第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...

  3. GCD Guessing Game Gym - 100085G 猜数字 gcd

    http://codeforces.com/gym/100085/attachments 因为那个数字是一个质数,这样的猜的次数是最多的,所以至少是质数次. 但是如果需要猜2.3,那么可以直接猜6,也 ...

  4. D. Time to Raid Cowavans 分块暴力，感觉关键在dp

    http://codeforces.com/contest/103/problem/D 对于b大于 sqrt(n)的,暴力处理的话,那么算出每个的复杂度是sqrt(n),就是把n分成了sqrt(n)段 ...

  5. Codeforces Round #172 (Div. 2) D. Maximum Xor Secondary 单调栈应用

    http://codeforces.com/contest/281/problem/D 要求找出一个区间,使得区间内第一大的数和第二大的数异或值最大. 首先维护一个单调递减的栈,对于每个新元素a[i] ...

  6. mysql通用分页存储过程遇到的问题

    DELIMITER $$ USE `tsb_asksys`$$ DROP PROCEDURE IF EXISTS `P_viewPage`$$ CREATE DEFINER=`root`@`local ...

  7. centos6安装lnmp

    CentOS 6 默认仓库不包含nginx,我们可以手动添加nginx的仓库. 访问nginx官网获取repo文件 我们需要先访问nginx的官方网站,获取官方的仓库地址.点击这里访问nginx官方文 ...

  8. Visual Studio Code的快捷键和相关技巧

    编辑相关的键盘快捷键: Shift + Alt + F = 格式化代码(似乎不好用) Ctrl + Shift + Enter = 在上一行新建空行并转到上一行 Ctrl + K,Ctrl + C = ...

  9. vscode 常用插件安装

    设置中文语言使用快捷键[Ctrl+Shift+P],弹出的搜索框中输入[configure language],然后选择搜索出来的[Configure Display Language],locale ...

  10. pixhawk原生固件在Windows下环境搭建笔记

    首先参考了以下几篇博客 博客1:https://zhuanlan.zhihu.com/p/25198079 博客2:http://blog.csdn.net/oqqenvy12/article/det ...