如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?
Safari 上的默认样式是这样的,
背景颜色可以使用background-color
改变,但中间那个点始终无法去掉。
我查了一些jQuery
插件,如iCheck.js
,但是那说明写得我都看不明白,根本不知道如何使用。
还有-webkit-appearance:none;
属性会直接将input[type="radio"]
元素隐藏。
应该如何更改?我的目标只是一个选中时是纯色的圆形,未选中时是带边框的透明圆形。
还可用css伪类写
<h3>CSS3 Custom radio</h3>
<div class="radio">
<input type="radio" value="1" name="sex" id="radio1" checked>
<label for="radio1">男</label>
<br>
<input type="radio" value="0" name="sex" id="radio2">
<label for="radio2">女</label>
</div>
label {
cursor: pointer;
display: inline-block;
font-size: 13px;
margin-right: 15px;
padding-left: 25px;
position: relative;
}
input[type="radio"] {
display: none;
}
label:before {
background-color: #a06b63;
bottom: 1px;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3) inset, 0 1px 0 0 rgba(255, 255, 255, 0.8);
content: "";
display: inline-block;
height: 16px;
left: 0;
margin-right: 10px;
position: absolute;
width: 16px;
}
.radio label:before {
border-radius: 8px;
}
input[type="radio"]:checked + label:before {
color: #f3f3f3;
content: "•";
font-size: 30px;
line-height: 18px;
text-align: center;
}
地址:https://jsfiddle.net/chic/q2t1z17a/
如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?的更多相关文章
- 纯css兼容个浏览器input[type='radio']不能自定义样式
各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-a ...
- 在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不全然一致
我们一般在定义CSS样式的时候都须要定义去掉HTML标签默认样式的CSS,原因是在不同的浏览器以下它们的表现出来的默认样式不全然一致,我们要保证在不同的浏览器下它们能正常显示出我们想要达到的预期效果, ...
- 自定义input[type="radio"]的样式(支持普通浏览器,IE8以上)
对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...
- 文件上传input type="file"样式美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 【转】让iframe在iOS设备手机浏览器上支持滚动
HTML代码 在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <i ...
- IOS和安卓WEB页面,input输入框被软键盘遮挡解决方法
本来以为这问题就只有ios才有,身边也没有android机测试,网上一搜,貌似有这个问题的还不少.最后把各种解决方法试了一边,貌似没什么用. 最后是这样解决的: setInterval(functio ...
- Ajax 上传input type file 文件
Html: <div class="attach-img"> <label><input type="file" id=" ...
- iOS中Safari浏览器select下拉列表文字太长被截断的处理方法
网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种: 安卓版的浏览器则没有这个问题. 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢? ...
- 移动端浏览器和微信浏览器上禁止body的滚动条
一般禁止body滚动的做法就是设置overflow:hidden. 但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改 ...
随机推荐
- upload 上传类
<?php/**file: fileupload.class.php 文件上传类FileUpload本类的实例对象用于处理上传文件,可以上传一个文件,也可同时处理多个文件上传 */class U ...
- 76、django之内置Admin
本篇导航: 配置路由 定制Admin Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django ...
- 两年JAVA程序员的面试总结
前言 工作两年左右,实习一年左右,正式工作一年左右,其实挺尴尬的,高不成低不就.因此在面试许多公司,找到了目前最适合自己的公司之后.于是做一个关于面试的总结.希望能够给那些依旧在找工作的同学提供帮助. ...
- Android ListView与RecycleView的对比使用
ListView,就如其名,是用来显示列表的一种View,而RecycleView,是其的加强版,今天带来的是这两个几乎具有相同的功能的对比使用 先从ListView说起吧 ListView: 1.在 ...
- vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- Effective Java 第三版——1. 考虑使用静态工厂方法替代构造方法
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...
- NHibernate之旅(13):初探马上载入机制
本节内容 引入 马上载入 实例分析 1.一对多关系实例 2.多对多关系实例 结语 引入 通过上一篇的介绍,我们知道了NHibernate中默认的载入机制--延迟载入.其本质就是使用GoF23中代理模式 ...
- Hadoop Yarn 安装
环境:Linux, 8G 内存.60G 硬盘 , Hadoop 2.2.0 为了构建基于Yarn体系的Spark集群.先要安装Hadoop集群,为了以后查阅方便记录了我本次安装的详细步骤. 事前准备 ...
- myeclipse配置SVN插件
方法一:link安装 安装subclipse, MyEclipse SVN插件 1.从官网下载最新的site-1.x.x.zip文件,网址是:folderID=2240" target= ...
- UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 46:illegal multibyte sequence
一. 最近使用python写入文件时,出现了如下的错误: 但是content的内容是unicode编码,不知道怎么和gbk扯上了关系,对content使用encode()和decode(),用gbk, ...