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兼容性问题的更多相关文章

  1. IOS中input键盘事件支持的解决方法

    欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...

  2. 解决iOS中tabBarItem图片默认颜色的问题(指定代码渲染模式为以原样模式的方式显示出来)

    解决iOS中tabBarItem图片默认颜色的问题(指定代码渲染模式为以原样模式的方式显示出来) 解决办法:指定图片的渲染模式(imageWithRenderingMode为:UIImageRende ...

  3. 解决iOS中 tabBarItem设置图片(image+title切图在一起)时造成的图片向上偏移

    解决iOS中 tabBarItem设置图片(image+title切图在一起)时造成的图片向上偏移 解决办法1:设置tabBarItem的imageInsets属性 代码示例: childContro ...

  4. JS 解决 IOS 中拍照图片预览旋转 90度 BUG

    上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...

  5. 日期格式在ios中的兼容性

    在IOS中支持 2017/3/2 这种格式的日期 不支持2017-3-2日期 /** * 返回兼容ios.android的日期时间格式 * @param dateTime String * @retu ...

  6. IOS中input光标跑偏问题的解决方法

    ios端兼容input光标高度处理 在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子 ...

  7. IOS中input键盘事件keyup 的兼容解决办法

    用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中很慢,用输入法输入之后,并未立刻相应keyup事件. 解决办法: 在ios设备上可以用html5的input事件 ...

  8. 解决移动端在IOS中input输入框光标过长

    在输入框样式中加入: line-height:20px;

  9. ios中input输入无效

    项目中一个登陆界面的input在安卓下可以输入,iOS下无法输入,经查询为 设置了-webkit-user-select:none;将其改为-webkit-user-select:auto;修正. 参 ...

随机推荐

  1. 123457123457#0#-----com.threeapp.PaoPaoLong01-----泡泡龙大作战01

    com.threeapp.PaoPaoLong01-----泡泡龙大作战01

  2. python 中 logging 模块的 log 函数以及坑

    记录下吧,一个日志的函数,但有个坑是在调用函数时需要先将函数实例化为一个变量,否则进入某个循环时会多次刷新日志: """ 日志模块 """ ...

  3. delphi两个取字串长度的函数strlen,length

    ━━━━━━━━━━━━━━━━━━━━━━━━━━ [strlen]PChar 串专用函数:串长度 procedure TForm1.BitBtn1Click(Sender: TObject); v ...

  4. MySQL中使用replace into语句批量更新表数据

    作为示例,我们在这里使用名为testdb的数据库,并且在其中创建两张一模一样的表: drop table if exists test_table_1; create table test_table ...

  5. 《Django企业开发实战 高效Python Web框架指南》胡阳

    链接:https://pan.baidu.com/s/1NmN_IT5RvevCMt9bZCW1-g提取码:2ki9

  6. 【C#设计模式2】简单工厂模式

    我们在编程的时候,每当"new"一个对象之后,这个对象就依赖于这个类了.如果在后期的维护过程中由于某些原因需要修改一下这个类,则唯一的做法就是打开源代码,进行修改,修改所有与这个对 ...

  7. Charles 教程

    本文介绍 charles 教程 - 代理抓包的使用方法 本文参考了:阿西河 Charles 教程 Charles Charles是一个HTTP代理/ HTTP监视器/反向代理,使开发人员能够查看其机器 ...

  8. angular入门 - 环境安装及项目创建

    1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https://nodejs.org/en/downloa ...

  9. 菜单特效jq

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Python--yaml文件操作

    一.yaml文件的使用注意事项 加载yaml文件函数: data = yaml.load(f)  (我在实际测试中用的是yaml.safe_load(f)可以正常,用yaml.load(f)会报错因为 ...