只改颜色

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. day04-运算符

    Python语言支持以下类型的运算符: 算术运算符比较运算符赋值运算符逻辑运算符位运算符成员运算符身份运算符 算术运算符 运算符 描述 实例 + 加 - 两个对象相加 10+20输出结果 30 - 减 ...

  2. python-玉米(小米)商城作业

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

  3. mac下shell给文件名批量加前缀

    用rename命令 如果没装的话执行下面这个命令安装rename brew install rename rename 's/^/logo_/' *.png

  4. PHP多例模式介绍_PHP教程

    1.多例类可以有多个实例2.多例类必须能够自我创建并管理自己的实例,并向外界提供自己的实例. 大家都知道PHP单例模式,却很少说PHP多例模式,下面是在wikipedia上看到的PHP多例模式的例子: ...

  5. 1.网站js文件获取

    ++++++++++++++++++++++ pls,input your domain like: http://111.com #coding:utf8 #encoding=utf8 import ...

  6. centos下SVN搭建多个库文件总汇

    1.checkout时,提示:URL svn://192.168.1.99/svntest doesn't exist...奇怪,怎么会提示库不存在呢?肯定是哪里配置问题.后来尝试了半天,也在网上搜索 ...

  7. C:\\MFC控件大小随窗体大小而改变

    一.大小和位置都改变 1.首先为窗体类添加CRect m_rect,该成员变量用来记录窗体的当前大小. 2.在类向导里面(Ctrl+W),为窗体添加消息WM_SIZE的响应函数OnSize(): 注意 ...

  8. shell-保留文件系统下剩余指定数目的文件

       path_backup=/mnt/fifth/backup/shellbackup  path_delete=/mnt/fifth/tmp/rubbish/  limit_num=15    f ...

  9. 实现了一下Mp3播放器的功能

    实现了一下Mp3播放器的功能 简单的实现了一下Mp3播放器的功能,见面比较的不美好,讲 究看一下就好了. 主要功能: 1.显示文件列表,主要参照了一位前辈的代码,谢咯. 2.可以实现播放开始,暂停. ...

  10. 安装mysql 初始化的时候报错 Can't find file: './mysql/db.frm' (errno: 13) ERROR: 1017

    目录下没有权限 需要权限