解决ios中input兼容性问题
1、解决input输入框在iOS中有阴影问题
input{
-webkit-appearance: none;
}
2、checkbox、raido在ios中阴影问题
单选: 多选: 


单选: <div class="m_radio">
<div class="login_agree">
<input type="radio" name="optionsRadiosinline" id="optionsRadios1" value="option1" checked>
<label for="optionsRadios1" class="input_agree" >加密锁</label>
</div>
<div class="login_agree">
<input type="radio"name="optionsRadiosinline" id="optionsRadios2" value="option2">
<label for="optionsRadios2" class="input_agree">软加密(支持离线激活)</label>
</div>
</div>
多选: <div class="pro_checkbox">
<input type="checkbox" id="pro_one" name="pro_one">
<label for="pro_one"></label>
</div>
css:
.pro-list label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
/*background: #EEE;*/
border:1px solid #999;
vertical-align: middle;
-webkit-border-radius: 50%;
margin-right: 5px;
-webkit-box-sizing:border-box;
-webkit-transition:background ease-in .5s
}
.pro-list input[type="checkbox"]:checked+label::before{
background-color: #4e39c2;
border: 2px #b3b3b3 solid;
}
/*自定义单选框radio样式*/
.pro-list .login_agree {
position: relative;
margin-left:10px;
-webkit-box-sizing:border-box;
vertical-align: middle;
}
.pro-list .login_agree input[type="radio"]{
display: none;
}
.pro-list input[type="radio"]+label::before{
width: 15px;
height:15px;
}
.pro-list .login_agree input[type="radio"]:checked+label::before{
background-color: #f4d345;
border: 1px #ccc solid;
width: 15px;
height:15px;
}
/*自定义复选框checkbox*/
.pro-list .pro_checkbox{
position: relative;
}
.pro-list .pro_checkbox input[type="checkbox"]{
display: none;
}
.pro-list .input_agree,label{font-weight:;font-size:.6rem;}
js部分:
$('.pro_checkbox').find('input[type=checkbox]').bind('click', function(){
$('.pro_checkbox').find('input[type=checkbox]').not(this).attr("checked", false);
});
解决ios中input兼容性问题的更多相关文章
- IOS中input键盘事件支持的解决方法
欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...
- 解决iOS中tabBarItem图片默认颜色的问题(指定代码渲染模式为以原样模式的方式显示出来)
解决iOS中tabBarItem图片默认颜色的问题(指定代码渲染模式为以原样模式的方式显示出来) 解决办法:指定图片的渲染模式(imageWithRenderingMode为:UIImageRende ...
- 解决iOS中 tabBarItem设置图片(image+title切图在一起)时造成的图片向上偏移
解决iOS中 tabBarItem设置图片(image+title切图在一起)时造成的图片向上偏移 解决办法1:设置tabBarItem的imageInsets属性 代码示例: childContro ...
- JS 解决 IOS 中拍照图片预览旋转 90度 BUG
上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
- 日期格式在ios中的兼容性
在IOS中支持 2017/3/2 这种格式的日期 不支持2017-3-2日期 /** * 返回兼容ios.android的日期时间格式 * @param dateTime String * @retu ...
- IOS中input光标跑偏问题的解决方法
ios端兼容input光标高度处理 在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子 ...
- IOS中input键盘事件keyup 的兼容解决办法
用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中很慢,用输入法输入之后,并未立刻相应keyup事件. 解决办法: 在ios设备上可以用html5的input事件 ...
- 解决移动端在IOS中input输入框光标过长
在输入框样式中加入: line-height:20px;
- ios中input输入无效
项目中一个登陆界面的input在安卓下可以输入,iOS下无法输入,经查询为 设置了-webkit-user-select:none;将其改为-webkit-user-select:auto;修正. 参 ...
随机推荐
- mysql占用服务器cpu过高的原因以及解决办法
登陆Mysql: mysql -p<port> -u<user> -p<pwd> mysql> show processlist; show processl ...
- java导入excel很完美的取值的方法
java导入excel很完美的取值的方法 1.解决方法: /** * 获取单元格数据内容为字符串类型的数据 * @param cell Excel单元格 * @return St ...
- JS微信网页使用图片预览(放大缩小)
前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...
- python使用datetime模块计算各种时间间隔的方法
python使用datetime模块计算各种时间间隔的方法 本文实例讲述了python使用datetime模块计算各种时间间隔的方法.分享给大家供大家参考.具体分析如下: python中通过datet ...
- VLOOKUP函数 from Excel
1.VLOOKUP函数是Excel中的一个纵向查找函数,它与LOOKUP函数和HLOOKUP函数属于一类函数,在工作中都有广泛应用,例如可以用来核对数据,多个表格之间快速导入数据等函数功能.功能是按列 ...
- 【leetcode算法-中等】2. 两数相加
[题目描述] 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表 ...
- Linux IO的五种模型 ongoing
服务器端编程经常需要构造高性能的IO模型,常见的IO模型: 阻塞I/O模型 (Blocking IO) ------------(同步)(阻塞) 非阻塞I/O模型 (Non-Blocking IO) ...
- web平台大数据请求传输性能处理
在XMLHttpRequest请求中使用ArrayBuffer方式,和后端服务器进行二进制的传输交互. 在项目中发现随着用户增长,部分前端功能,请求的数据量越来越大,传统的josn的方式,在下载.序列 ...
- canvas与svg的区别
1.历史: canvas是html5提供的新元素. 而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或 ...
- ${__setProperty(row,rowNum)};不能在import XXX后面使用;
如下 ${__javaScript只能用一次调用 excel.CWResultFile.CWOutputFile.wOutputFile("/Users/iot/1.xls", & ...