OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

用纯CSS改变html radio/checkbox默认背景颜色样式


分享到


分类 编程技巧   关键字 前端   发布 ourjs  1538575505557
注意 转载须保留原文链接,译文链接,作者译者等信息。  
checkbox/ radoi默认不支持更改背景颜色,这里可以使用伪类来实现。基本原理是利用after/ before插入新的元素。然后利用新元素的背景颜色或背景图片覆盖掉原来的样式。

CSS代码:
input[type=checkbox] {
  margin-right: 5px;
  cursor: pointer;
  font-size: 14px;
  width: 15px;
  height: 12px;
  position: relative;
}

input[type=checkbox]:after {
  position: absolute;
  width: 10px;
  height: 15px;
  top: 0;
  content: " ";
  background-color: #ff0000;
  color: #fff;
  display: inline-block;
  visibility: visible;
  padding: 0px 3px;
  border-radius: 3px;
}

input[type=checkbox]:checked:after {
  content: "✓";
  font-size: 12px;
}



input[type=radio] {
    margin-right: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 15px;
    height: 12px;
    position: relative;
}

input[type=radio]:after {
    position: absolute;
    width: 10px;
    height: 15px;
    top: 0;
    content: " ";
    background-color: #ff0000;
    color: #fff;
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
    border-radius: 50%;
}

input[type=radio]:checked:before {
    content: "✓";
    display: block;
    position: relative;
    top: -2px;
    left: 3px;
    width: 6px;
    height: 6px;
    color: #fff;
    font-weight: 400;
    z-index: 1;
}
HTML 示例:

<input type="checkbox" name="method" value="plus" checked>plus<br>
<input type="checkbox" name="method" value="minus">minus<br>
<input type="radio" name="method" value="plus">plus<br>
<input type="radio" name="method" value="minus" checked>minus<br>

示例: https://jsbin.com/wawoguq/edit?html,css,output




参考: stackoverflow

 


社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. JavaScript运算出现很多小数导致运算不精确的问题,用toFixed解决
  2. Linux上为git无交互添加最低权限的使用用户
  3. 为jquery的ajax请求添加超时timeout时间
  4. 使用Node.JS批量查找替换目录下文本文件中图片地址内容
  5. Redis/Python被要求更改Master/Slave程序接口名称和描述
  6. 用JavaScript测试图像上两点之间的距离
  7. 判断Node.JS TCP Socket当前连接状态
  8. 用纯CSS改变html radio/checkbox默认背景颜色样式
  9. 用JavaScript实现basename获取路径中的文件名
  10. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - 编程技巧
  1. 用纯CSS改变html radio/checkbox默认背景颜色样式
  2. Node.JS命令行或批处理中更改Linux用户密码
  3. 用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
  4. 用css禁用input、checkbox、select等html控件,实现disable效果
  5. 让Select选择框可编辑可输入可自动补全可下拉选择
  6. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  7. Node.js框架之express
  8. 纽约时报使用Html5 WebRTC记录访问者IP地址
  9. 在Debian/Ubuntu上面安装升级nginx到最新版
  10. 编写高性能HTML网页应用

 关键字 - 前端
  1. css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色
  2. 用JavaScript实现basename获取路径中的文件名
  3. 用纯CSS改变html radio/checkbox默认背景颜色样式
  4. CSS垂直水平完全居中手册
  5. 15个最好的HTML5前端响应式框架(2014)
  6. 我被问得最多的十个JavaScript前端面试问题
  7. 5个经典的前端面试问题
  8. 超简易——Bootstrap可关闭tab标签页
  9. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  10. 用css禁用input、checkbox、select等html控件,实现disable效果

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号