只改颜色

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. jsfl 读取xml

    var fileURI = "file:///c|/temp/mydata.txt"; var dataXml = new XML(FLfile.read(fileURI)); v ...

  2. springboot 停止

    因springboot内嵌tomcat或jetty使得我们没法去操作服务: 因此,常常是服务起来后,要重启时会端口占用,我们只能无情的kill掉端口. 不过spring也设置有配置停止的请求: App ...

  3. pod install vs pod update

    Podfile文件,Podfile.lock文件 Podfile文件:指定依赖库的版本规则 Podfile.lock文件:记录当前工程中使用的依赖库的版本号 pod install会去安装podfil ...

  4. weka连接mysql数据库

    一.下载并解压数据库驱动 下载地址:http://www.mysql.com/products/connector/,本文下载 mysql-connector-java-5.0.8.zip.将解压后的 ...

  5. mysql 的sleep线程过多处理方法

    php程序不要使用长连接:java程序调整连接池 什么是长连接? 其实长连接是相对于通常的短连接而说的,也就是长时间保持客户端与服务端的连接状态. 通常的短连接操作步骤是: 连接->数据传输-& ...

  6. linux内核中的const成员是否可以修改?

    本文的基础知识:由于前半部分内容是转的,且不知道原文出处,没法给出原文地址,大家自行百度 const的实现机制 const究竟是如何实现的呢?对于声明为const的内置类型,例如int,short,l ...

  7. Mybatis高级应用-2

    文章内容简介 1.回顾 2.Mybatis配置文件解析 3.Mybatis映射文件解析 ResultMap标签使用 自定义返回值处理(Map) 关联映射 主键映射 一.回顾 Mybatis是ORM(o ...

  8. React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

    昨天在项目中,重新封装组件时,引用了原来的一个子组件,但发现子组件在其他页面正常,在新的组件里面就发生保存, 然后把子组件注释,随便显示其div元素也正常,纠结了很久,最后发现引用的方式有问题 子组件 ...

  9. CSS强制换行和禁止换行代码

    一.强制换行      1.word-break: break-all;       只对英文起作用,以字母作为换行依据.      2.word-wrap: break-word;   只对英文起作 ...

  10. Swift字符串常用方法

    1.0 比较两个字符串是否相等 判断字符串相等的方法是: ==. var str1 = "Hello world" var str2 = "Hello world&quo ...