checkbox/radio 样式修改
只改颜色
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 样式修改的更多相关文章
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- css美化checkbox radio样式
/*check,radio*/ input.check_txt[type='checkbox']{ display: none; } input.check_txt[type='checkbox'] ...
- 小程序radio样式修改
.city-radio-group-label .city-label-radio { //label样式 padding: 15rpx 50rpx; position: relativ ...
- HTML复选框checkbox默认样式修改
此方法可以将复选框的默认样式替换成任意样式.如图: 未选择: 选择时: 思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框. 代码如下: <!DOCTYPE ht ...
- type="radio"样式修改
input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px; ...
- 自定义checkbox,radio样式
input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 15px; ...
- 新 radio样式修改
https://blog.csdn.net/qq_41617704/article/details/80973966
- 自定义checkbox/radio
一. label标签 1. 概念: HTML <label>元素表示用户界面中项目的标题.它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性.这样的控制称作label ...
- Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
随机推荐
- Windows环境安装Django步骤
前提:已经安装Python 1.先从Django官网下载压缩包:https://www.djangoproject.com/download/ 2.解压Django,如我解压到 D:\Python\D ...
- screen 命令安装使用
初次接触Linux的朋友总会有个感觉:Windows平台想同时运行多个操作,执行多个程序或命令只需要打开程序即可:但在Linux中,命令行就一个,要想同时执行多个命令如何操作? 其实,只需要一个简简单 ...
- day15-函数进阶
1.函数嵌套 多个函数嵌套在一起即为函数嵌套 在调用函数时,函数需在调用之前定义,如果函数在调用之后才定义,则不能被成功调用.当定义多个函数时,函数名称不能相同,否则后定义的函数会将之前的函数覆盖,即 ...
- classloader trace
类加载机制: 程序启动时,根据入口函数调用相关功能,功能在不同类中即在不同的class文件中,jvm根据类加载机制来动态加载class文件到内存中,只有被加载后才能被调用,否则引发异常 1.装载:查找 ...
- php版本升级导致openssl无法使用
也就是call to undefined function openssl错误: 把extension前面的注释去掉,甚至把“libeay32.dll和ssleay32.dll文件复制并替换到apac ...
- python流程控制while和if
流程控制 1.流程控制if if的4种语法 语法1: #结构形式 #if条件: # 代码1 # 代码2 # 代码3 # ... key_bak=123 key=int(input('key:')) ...
- 1.13.Mark1
[经济学人]双语阅读:律师事务所 标价更高 收益更少 Business 商业报道 Law firms 律师事务所 Charging more, getting less 标价更高,收益更少 L ...
- 4.Java的流程控制.md
目录 1. break语句 2.continue 3.foreach语句 4.可变参数: 1. break语句 Java的break语句,正常情况下,break和c++一样,但是Java可以设置一个标 ...
- 关于池化(pooling)理解!!!
网上看到一个池化的解释是: 为了描述大的图像,可以对不同位置的特征进行聚合统计,如计算平均值或者是最大值,即mean-pooling和max-pooling 我的想法是,图像做卷积以后,将图像信息(特 ...
- 使用RestTemplate调用接口上传文件
场景 接口接受一个文件,缓存在本地,验证文件的完整性及内容,然后将文件上传至云服务器: 下面只写利用RestTemplate将文件上传至云服务器,至于文件上传以及缓存在本地可以参考:JAVA文件上传: ...