type="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: 20px; height: 20px; 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: 4px solid #ddd; background-color: #37AF6E; } 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 id="credit_input" type="radio" tabindex="1" name="reason" value="1" checked="">
<label class="reason_label" for="credit_input"></label>
<img src="/asset/img/icon_weixinpay.png" alt="">
type="radio"样式修改的更多相关文章
- checkbox/radio 样式修改
只改颜色 input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: ...
- 小程序radio样式修改
.city-radio-group-label .city-label-radio { //label样式 padding: 15rpx 50rpx; position: relativ ...
- 新 radio样式修改
https://blog.csdn.net/qq_41617704/article/details/80973966
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- input[type="radio"]自定义样式
input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...
- 自定义input[type="radio"]的样式
对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...
- 纯css兼容个浏览器input[type='radio']不能自定义样式
各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-a ...
- 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?
Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...
随机推荐
- 爬虫系列(七) requests的基本使用
一.requests 简介 requests 是一个功能强大.简单易用的 HTTP 请求库,可以使用 pip install requests 命令进行安装 下面我们将会介绍 requests 中常用 ...
- Python学习笔记之文件处理
1.打开和关闭 要打开文件可以使用函数 open(),它位于自动导入模块 io 中.函数将文件名作为唯一不可缺少的函数,并返回一个文件对象.它还有一个名叫 mode 的参数,用于指定文件模式,其可取值 ...
- 36.分页及deep paging
主要知识点 1.es分页 2.deep paging 一.es分页语法 size,from 这两个关键字 GET /_search?size=10 指定每页10条数据 GET /_search ...
- fastadmin 接口(上传)
/** * 添加注释指南 * */ public function store(Request $request) { dump($request);exit; $name = $request-&g ...
- python orm框架-----SQLALchemy-查询篇
似乎ORM最难设计的部分是查询.特别是面向对象的查询,今天学习SQLAlchemy,发现SQLAlchemy的查询语法竟如此灵活,惊叹其如此强大的表达能力的同时也对Python也有了更深的认识.下面看 ...
- 学习EXTJS6(4)基本功能-信息提示框组件
1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...
- 暑假集训D12总结
刷题 今天终于不考试= = 上午刷了一大圈线段树板子题,于是算是学会了Zkw线段树= = 下午昨天的dalao又来讲几何,然而仍然没有笔记= = 于是刷了一大圈计算几何的水题= =,并没哟啥可以写出题 ...
- 洛谷 P2483 BZOJ 1975 [SDOI2010]魔法猪学院
题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPig对猪世界的世界本原有了很多的了解:众所周知,世界是由元素构成的:元素与 ...
- 数据库工具——Navicat Premium使用技巧
Navicat Premium 常用功能讲解 1.快捷键 1.1. F8 快速回到当前对象列表 1.2. Ctrl + q 打开查询界面 1.3. Ctrl + d 快速修改当前的表结构 1.4 ...
- IE-FSC
Top3: Top2: FSC related to Redis: (Redis = https://www.cnblogs.com/ngtest/p/10693750.html) FSC statu ...