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"样式修改的更多相关文章

  1. checkbox/radio 样式修改

    只改颜色 input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: ...

  2. 小程序radio样式修改

    .city-radio-group-label .city-label-radio {    //label样式   padding: 15rpx 50rpx;   position: relativ ...

  3. 新 radio样式修改

    https://blog.csdn.net/qq_41617704/article/details/80973966

  4. 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  5. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  6. input[type="radio"]自定义样式

    input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...

  7. 自定义input[type="radio"]的样式

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...

  8. 纯css兼容个浏览器input[type='radio']不能自定义样式

    各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异   //html <div class="remember-a ...

  9. 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?

    Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...

随机推荐

  1. [CodeForces]1059C Sequence Transformation

    构造题. 我递归构造的,发现如果N>3的话就优先删奇数,然后就把删完的提取一个公约数2,再重复操作即可. 具体原因我觉得是因为对于一个长度大于3的序列,2的倍数总是最多,要令字典序最大,所以就把 ...

  2. Linux下进程与线程的区别

    https://www.cnblogs.com/fah936861121/articles/8043187.html https://my.oschina.net/cnyinlinux/blog/36 ...

  3. Golang - 并发编程

    目录 Golang - 并发编程 1. 并行和并发 2. go语言并发优势 3. goroutine是什么 4. 创建goroutine 5. runtime包 6. channel是什么 7. ch ...

  4. 自学python 第三天

    #!/usr/bin/env python# -*- coding:utf-8 -*- # name = "***"# if "*" in name:# pri ...

  5. windows 下 logstash 安装启动

    最新在研究elastic stack (elk)  : logstash 安装,下载最新版本的logstash: 点击打开链接 解压到磁盘根目录下:在logstash>bin 1.目录下创建:l ...

  6. Atomic operations on the x86 processors

    On the Intel type of x86 processors including AMD, increasingly there are more CPU cores or processo ...

  7. eclipse实现批量修改文件的编码方式

    http://blog.csdn.net/haorengoodman/article/details/38493007 在eclipse+MyEclipse环境下,打开一个jsp文件,经常发现汉字无法 ...

  8. Elasticsearch顶尖高手系列课程推荐

    Elasticsearch,是目前行业中非常热门的一个技术.Elasticsearch是一种分布式的海量数据搜索与分析的技术,可以用于电商网站.门户网站.企业IT系统等各种场景下的搜索引擎,也可以用于 ...

  9. poj2135(简单的最小费用流问题)

    题目链接:http://poj.org/problem?id=2135 Farm Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submis ...

  10. 打破传统天价SAP培训,开创SAP师徒之路,经验丰富的老顾问带徒弟 qq群150104068

    SAP领航社区,开设了一个导师性质的师徒圈子,类似大学导师带研究生,导师给学生安排课题.分配任务.分享资料,让学生自学提高.我们的教学方法是以自学为主.辅导为辅助,在实践中积累经验掌握原理.主要方向A ...