如何更改 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去定义属性,然后改 ...
随机推荐
- 深入研究-webkit-overflow-scrolling:touch及ios滚动
1. -webkit-overflow-scrolling:touch是什么? MDN上是这样定义的: -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效 ...
- Hibernate框架进阶(上篇)
导读 前面一片文章介绍了Hibernate框架的入门,主要是讲解Hibernate的环境搭建和简单测试,有兴趣的童鞋出门左转.本文在入门的基础上进行Hibernate的进阶讲解,分为上中下三篇,本篇为 ...
- spfa_dfs找负环
luogu #include<iostream> #include<cstdio> #include<cstring> #include<vector> ...
- SpringCloud高可用Eureka搭建
网上很多博客写的都是在本地一台机器上面搭建的,我用两台机器来为大家搭建一个注册中心高可用集群 第一步:需要在每一台机器上面搭建一个注册中心. 第二步:编写第一台机器注册中心配置文件 第三步:编写第二台 ...
- kubernetes入门实践
k8s中文文档 k8s概念比较多,有什么概念的疑惑的推荐看k8s中文文档. me的环境 操作系统:centos7 docker:1.12.6 环境跟me的不一致?不要慌,基本大部分操作都是行的通的. ...
- Golang中的信号处理
信号类型 个平台的信号定义或许有些不同.下面列出了POSIX中定义的信号. Linux 使用34-64信号用作实时系统中. 命令 man 7 signal 提供了官方的信号介绍. 在POSIX.1-1 ...
- 关于hash和ico的一些关联
最近測试提出一个bug.说某几个页面中的ico不显示,于是针对此问题排查原因. 首先,确保页面中的link已引入favicon.ico. 经查看,发现是js中的location.hash导致了ico不 ...
- Intent启动系统组件(activity,service,BroadReceiver)-android学习之旅(四十九)
android提供了统一的编程模型Intent来启动系统的组件,这样提供了松耦合性.是一种mvc的编程模式 $(function () { $('pre.prettyprint code').each ...
- [Shell]crontab 运行任务调用shell脚本,相对路径无法找到
问题出现的场景大概就是 1 cron调用一个python脚本 2 python脚本中调用一个shell脚本(对日志分析)获取shell输出然后发送邮件 类似一个监控任务. 直接运行python脚本 ...
- Spring学习笔记(三)之装配Bean
除了组件扫描与自动装配之外还有基于Java代码的装配与基于XML的装配. 有一些场景是我们不能用自动装配的,比如我们要给第三方库中的组件装配到我们的应用中,这时自动装配无效,因为自动装配只能扫描本应用 ...