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重 ...
随机推荐
- javascript中的立即执行函数(function(){…})()
javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包 ...
- C# 实现保留两位小数的方法
1.Math.Round(0.333333,2);//按照四舍五入的国际标准 2.double dbdata=0.335333; string str1=String.Format("{0: ...
- FDQuery多表更新生成sql语句的问题
query.sql='select a,b,c,d,e from a,b,c where ....'; 来源3个表, 设计时添加字段列表,每个字段有Origin属性 分别是a.a,b.b,c.c格式 ...
- Java安全编码标准
Java安全编码标准 具体参考Rules 输入验证和数据净化(IDS)规则风险评估概要 IDS00-J净化穿越受信边界的非受信数据 IDS01-J验证前标准化字符串 IDS02-J在验证之前标准化路径 ...
- day44-pymysql模块的使用
pymysql模块的使用 本节重点: pymysql的下载和使用 execute()之sql注入 增.删.改:conn.commit() 查:fetchone.fetchmany.fetchall 一 ...
- Redis脚本
8.启动 /usr/local/bin/redis-server /etc/redis/redis.conf ./redis-server /home/work/redis/redis.conf &a ...
- UI5-学习篇-15-云连接SAP Cloud Connector
请关注地址:http://blog.itpub.net/29829936/viewspace-2128829/ 1.SCC下载及安装 https://tools.hana.ondemand.com/# ...
- Javascript 对象的创建和属性的判定
1. 创建对象的方法: 直接使用new 对Object对象进行操作,即对Object 对象进行实例化 <!DOCTYPE html> <html lang="en" ...
- Linux命令:索引
目录 A B C D E F G H I jobs J K L M N nohup O P Q R S T trU V W X Y Z A alias B C cd D dirs E F G ...
- VsCode 使用习惯设置(备份)
{ "window.menuBarVisibility": "toggle", "workbench.statusBar.visible": ...