效果图:

实现代码如下:

/* 选中input标签类型为复选框的 */
input[type="checkbox"] {
width: 16px;
height: 16px;
vertical-align: middle;
-webkit-appearance: none;
/*清除默认样式*/
border: 1px solid #D1D1D1;
border-radius: 3px
} /* 点击选中时 */
input[type="checkbox"]:checked {
background: url("https://pic.imgdb.cn/item/63a01ca8b1fccdcd365fc380.png") no-repeat center center;
background-size: 20px;
}

css 修改复选框的样式的更多相关文章

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

    input[type='checkbox']{ width: 20px; height: 20px; background-color: #fff; -webkit-appearance:none; ...

  2. css写复选框

    前面讲过<完全使用css编写复选框>,后来在深入学习sass过程中,发现:这种写法虽然也能达到目的,但是稍嫌复杂了一点.这里介绍一种可以说更简单一点的方法,其实也就是html结构更简单一点 ...

  3. 纯css3单选框/复选框美化样式代码

    纯CSS 单/复选框 美化请选择iPhone 型号 iPhone 6s iPhone 6s Plus iPhone 7 iPhone 7 Plus   选择兴趣爱好 女 绘画 摄影 骑行   原理在这 ...

  4. js自定义修改复选框单选框样式,清除复选框单选框默认样式

    之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...

  5. 复选框checkbox样式修改

    该方法只兼容IE9及以上 将checkbox和label关联起来, 将checkbox隐藏掉,通过点击label来点击checkbox,label的样式即可自定义. 通过checkbox:checke ...

  6. 完全使用css编写复选框

    在日常的项目中,出现复选框或者单选框,应该都属于常见需求了,最开始阶段,一般只有两种可能性: 一.完全使用  <input type="checkbox" />或者&l ...

  7. 纯css美化复选框,单选框,滑动条(range)

    <div class="box"> <!-- 借鉴地址:http://www.cnblogs.com/xiaoxianweb/p/5465607.html --& ...

  8. 自定义复选框 checkbox 样式

    默认的复选框样式一般在项目中都很少用 ,看起来也丑丑的.这里提供一个优化样式后的复选框.原理就是隐藏掉默认样式,在用设计好的样式替代 html结构 <div> <input type ...

  9. CSS 美化复选框 - 无图片方式

    今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> < ...

  10. JQuery Mobile - 修改复选框的选中状态无效解决办法!

    今晚,在编写JQuery Mobile程序时候,需要在代码里面控制复选框的选中状态,很简单的代码啊,很快完成了!等测试程序时候傻眼了,页面无论如何也不按照我写的代码显示出来!问题出在哪里呢?是我写的控 ...

随机推荐

  1. #2045:不容易系列之三LELE的RPG难题(dp递推)

    Problem Description 人称"AC女之杀手"的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多"Cole"(LELE的粉丝,即"可乐 ...

  2. # 0x56 动态规划-状态压缩DP

    0x56 动态规划-状态压缩DP Mondriaan's Dream Description Squares and rectangles fascinated the famous Dutch pa ...

  3. AtCoder Beginner Contest 174 个人题解(ABC水题,D思维,E题经典二分,F离线树状数组)

    做完本期以后,最近就不会再发布 AtCoder 的往届比赛了(备战蓝桥杯ing) 补题链接:Here ABC题都是水题,这里直接跳过 D - Alter Altar 题意:一个R-W串,可以进行两种操 ...

  4. 线段树的区间更新 hdu 1698

    ***第一次写的果断超时,所以百度了一下,知道我写的每一次都要递归最底层,这样会花费很多时间,第二次写得线段树的区间更新,因为一个条件写错了,真是让我坑到死, 这样区间相同的不必更新,省了很多时间.. ...

  5. Vue第六篇 element-ui 项目管理工具npm webpack 启Vue项目vue-cli

    node npm npm管理项目 npm init -y npm install xxxx@0.0.0 npm uninstall xxx npm i 下载package.json所有的依赖 webp ...

  6. SV OOP-2

    静态变量 继承性(Inheritance) 抽象类和虚方法virtual methods 多态(Ploymorphism) 通过基类的变量可以使用子类的对象 基类中定义的virtual functio ...

  7. APB

    APB Usage APB主要用于寄存器和外设(GPIO\TIMER\UART)的访问 CPU 通过AXI接口发出transaction访问外设,AXI-based interconnect接收到AX ...

  8. 【MLA】内存泄漏检查

    项目地址:skullboyer/MLA (github.com) 介绍 MLA 即 Memory Leak Analyzer,是一个排查内存泄漏的分析器 实现机制是在malloc时记录分配位置信息,在 ...

  9. PHPCMS V9安装出现DNS解析失败的解决方法-不支持采集和保存远程图片

    目前因为phpcms官网停止解析后,很多人安装phpcms v9出现如下错误:     这是因为检测dns解析的域名是phpcms官网的域名,官网域名停止解析后肯定检测失败.解决方法如下:   打开/ ...

  10. [转帖]TiKV 多副本丢失以及修复实践

    https://tidb.net/blog/ad45bad9#6%E6%80%BB%E7%BB%93 1实验目的 随着tidb使用场景的越来越多,接入的业务越来越重要,不由得想试验下tidb组件的高可 ...