只改颜色

input[type=radio],input[type=checkbox] {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin-left: 5px;
-webkit-appearance: none;
background-color: transparent;
border: 0;
outline: 0 !important;
line-height: 20px;
color: #d8d8d8;
}
input[type=radio]:after {
content: "";
display:block;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
line-height: 14px;
font-size: 16px;
color: #fff;
border: 2px solid #ddd;
background-color: #fff;
box-sizing:border-box;
}

input[type=checkbox]:after {
content: "";
display:block;
width: 14px;
height: 14px;
border-radius: 7px;
text-align: center;
line-height: 14px;
font-size: 16px;
color: #fff;
border: 2px solid #ddd;
background-color: #fff;
box-sizing:border-box;
}
input[type=checkbox]:checked:after {
border: 2px solid #ddd;
background-color: #EF8120;
}

input[type=radio]:checked:after {
content: "L";
transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
border-color: #37AF6E;
background-color: #37AF6E;
}

加背景图

input[type=radio],input[type=checkbox] {
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
margin-left: 5px;
-webkit-appearance: none;
background-color: transparent;
border: 0;
outline: 0 !important;
line-height: 20px;
color: #d8d8d8;
border-radius: 4px;
overflow: hidden;
}
input[type=radio]:after {
content: "";
display:block;
width: 15px;
height: 15px;
border-radius: 4px;
text-align: center;
line-height: 14px;
font-size: 16px;
color: #fff;
border: 1px solid #3B3B41;
background: #343446;
box-sizing:border-box;
border-radius: 50%;
overflow: hidden;
}

input[type=checkbox]:after {
content: "";
display:block;
width: 15px;
height: 15px;
border-radius: 7px;
text-align: center;
line-height: 14px;
font-size: 16px;
color: #fff;
border: 1px solid #3B3B41;
background: #343446;
box-sizing:border-box;
border-radius: 4px;
overflow: hidden;background-image: url(__IMG__/xuanzhong.png);
}
input[type=checkbox]:checked:after {

border: 1px solid #3B3B41;
background: #343446;
background-image: url(__IMG__/xuanzhong.png);
background-size: 100% 100%;
border-radius: 4px;

}

checkbox/radio 样式修改的更多相关文章

  1. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  2. css美化checkbox radio样式

    /*check,radio*/ input.check_txt[type='checkbox']{ display: none; } input.check_txt[type='checkbox'] ...

  3. 小程序radio样式修改

    .city-radio-group-label .city-label-radio {    //label样式   padding: 15rpx 50rpx;   position: relativ ...

  4. HTML复选框checkbox默认样式修改

    此方法可以将复选框的默认样式替换成任意样式.如图: 未选择: 选择时: 思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框. 代码如下: <!DOCTYPE ht ...

  5. type="radio"样式修改

    input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px; ...

  6. 自定义checkbox,radio样式

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

  7. 新 radio样式修改

    https://blog.csdn.net/qq_41617704/article/details/80973966

  8. 自定义checkbox/radio

    一. label标签 1. 概念: HTML <label>元素表示用户界面中项目的标题.它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性.这样的控制称作label ...

  9. Css实现checkbox及radio样式自定义

    前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

随机推荐

  1. tensorflow实战系列(一)

    最近开始整理一下tensorflow,准备出一个tensorflow实战系列,以飨读者. 学习一个深度学习框架,一般遵循这样的思路:数据如何读取,如如何从图片和标签数据中读出成tensorflow可以 ...

  2. linux 显示系统执行的进程

    ps -a  显示所有的进程信息 -u 以用户的形式显示系统进程 -x  显示后台进程运行的参数 netstat  -anp |more 查看端口 查看开放的端口 vim/etc/sysconfig/ ...

  3. 经典论文翻译导读之《Finding a needle in Haystack: Facebook’s photo storage》

    https://github.com/chrislusf/seaweedfs [译者预读]面对海量小文件的存储和检索,Google发表了GFS,淘宝开源了TFS,而Facebook又是如何应对千亿级别 ...

  4. 利用nginx搭建RTMP视频点播、直播、HLS服务器(转)

    开发环境 Ubuntu 14.04 server nginx-1.8.1 nginx-rtmp-module nginx的服务器的搭建 安装nginx的依赖库 sudo apt-get update ...

  5. VS2017断点调试UNITY2018.3 经常卡住的问题

    发现了VS下断点经常导致unity卡住的原因,是vs占用CPU太高导致的,这其中又是vs service hub 造成的,这个除了在代码中提示各函数引用之外好像没什么用,我定位到它的安装目录,删除了配 ...

  6. 【380】python 获取列表排序后的索引列表

    参考:Equivalent of Numpy.argsort() in basic python? - Stack Overflow 通过 enumerate 实现 [i for i,v in sor ...

  7. KVM虚拟化技术(六)磁盘管理

    KVM支持的虚拟磁盘类型 raw 这并非是一种真正的磁盘格式,而是代表虚拟机所使用的原始镜像:它并不存储元数据,因此可以作为保证虚拟机兼容性的候选方案,然而也正因为 它不存储元数据,因此不能支持某些高 ...

  8. 5分钟K线图压力线买点怎么看?

    某开盘后底开一直呈现形成了一个长时间的箱体振荡的走势,K线在底位振荡时,其波动底点总是在不断抬高的话,这种走势说明有资金在场中积极运作,正是由于资金悄然建仓导致了底点慢慢抬高的走势,在底点不断抬高时, ...

  9. numpy-帮助文档 & 速查表.md

    目录 转相关资料: 速查表 速查代码 转相关资料: 官方手册 易佰教程 gitbook ZMonster's Blog 速查表 速查代码 # -*- coding: utf-8 -*- "& ...

  10. linux console 显示颜色【转】

    http://blog.csdn.net/hejinjing_tom_com/article/details/12162491 引言: 由于在c代码中看到过打印彩色字, 又对PS1 想进一步了解,才有 ...