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,但是那说明写得我都看不明白,根 ...
随机推荐
- AtCoder ARC 076E - Connected?
传送门:http://arc076.contest.atcoder.jp/tasks/arc076_c 平面上有一个R×C的网格,格点上可能写有数字1~N,每个数字出现两次.现在用一条曲线将一对相同的 ...
- MySQL 复制 - 性能与扩展性的基石:概述及其原理
原文:MySQL 复制 - 性能与扩展性的基石:概述及其原理 1. 复制概述 MySQL 内置的复制功能是构建基于 MySQL 的大规模.高性能应用的基础,复制解决的基本问题是让一台服务器的数据与其他 ...
- Merging into a Table: Example
Merging into a Table: Example The following example uses the bonuses table in the sample schema oe w ...
- APIO 2017 游记
//第一次写游记,只是流水账...结果好像确实只去游了…… day-11 省选挂了,即将退役……(然而apio之后得知并没有退役,感谢放我一条活路)(吐槽出题人考完才造数据,题目没有子任务之类的玩意, ...
- 简述synchronized和java.util.concurrent.locks.Lock的异同
1.synchronized 用在方法和代码块的区别? a. 可以只对需要同步的使用 b.与wait(),notify()和notifyall()方法使用比较方便 2.wait() a.释放持有的对象 ...
- nodejs-n-nvm版本管理工具
第一种版本管理工具: n n是Node的一个模块,作者是TJ Holowaychuk(鼎鼎大名的Express框架作者),就像它的名字一样,它的理念就是简单: "no subshells, ...
- Windows 10不能正常打开开始菜单问题修复
1.可以尝试通过命令重新注注册Windows Store app: powershell -ExecutionPolicy Unrestricted Add-AppxPackage -DisableD ...
- eclipse断点调试教程
1.断点就是你希望程序运行到哪暂停, 2.断点就是你希望程序运行到哪暂停, 3.断点就是你希望程序运行到哪暂停,断点往往就是你觉得程序可能出错的地方. 设定断点的办法很简单,在你认为出错的那一行的行 ...
- 项目结构、包、编译为exe!
一个java源文件里至多有一个public类,该类的名称必须与源文件名称称同样.也能够没有public类.文件名称与随意一个类名一致就可以. 包 类似于cpp的namespace,是对类的再封装,防止 ...
- PHP统计所有字符在字符串中出现的次数
<?php //统计字符串中出现的字符,出现次数 echo '<pre>'; $str = 'aaabbccqqwweedfghhjffffffffggggggggg';//字符串示 ...