只改颜色

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. delphi android 自动升级

    用IdHTTP1下载文件到手机完成. 调用自动安装不行. First chance exception at $DFC22519. Exception class EJNIException with ...

  2. 机器学习入门-文本数据-构造Tf-idf词袋模型(词频和逆文档频率) 1.TfidfVectorizer(构造tf-idf词袋模型)

    TF-idf模型:TF表示的是词频:即这个词在一篇文档中出现的频率 idf表示的是逆文档频率, 即log(文档的个数/1+出现该词的文档个数)  可以看出出现该词的文档个数越小,表示这个词越稀有,在这 ...

  3. mfc cef<转>

    在mfc单文档程序中加入cef: .在BOOL CtestCEFApp::InitInstance()中初始化cef HINSTANCE hInst = GetModuleHandle(NULL); ...

  4. WebAssembly相关

    git搜索:https://github.com/search?q=WebAssembly 相关demo:https://github.com/jpmorganchase/perspective we ...

  5. jquery下的正反选操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. nodejs 热更新插件

    键入命令: npm -g install supervisor supervisor必须安装到全局 可以用supervisor 来启动服务 命令supervisor app.js

  7. Java继承与多态浅析

    一.继承 1.通过extends继承的父类可以是不加abstract关键字的普通类,也可以是加了abstract关键字的抽象类.继承普通类时可以覆写父类的方法,或者创建自己独有的方法,或者这两     ...

  8. 使用py2exe转换python文件为可执行程序

    py2exe可以将python脚本转换成在Windows上的可独立执行.exe程序的工具.可以让Python脚本在没有安装python工具的Windows系统上运行,方便脚本共享. 操作环境 pyth ...

  9. Oracle数据库中的数据出错的解决办法

    http://www.jcwcn.com/article/database/oracle/ 今天上班犯了一个严重的错误:把我们系统所使用的Oracle数据库中的数据给改掉了!当发现自己改错时,顿时冒了 ...

  10. Idea使用Maven异常 --- Maven网络代理设置

    在conf/setting.xml和m2/repository/setting.xml中加入: <proxies> <!-- proxy | Specification for on ...