苹果手机 input框兼容性,input 在iPhone 上 上边框有阴影

溢出星云
• 阅读 3370

一、样式复现
h5移动端开发,发现在苹果手机上input显示有问题。input的border已经初始化设置为none了,根据需求进行了border样式的重置。
但在苹果手机上渲染有问题。如下图所示:

苹果手机 input框兼容性,input 在iPhone 上 上边框有阴影

二、解决方案:

input{
   outline: none;
    -webkit-appearance: none; /*去除系统默认的样式*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/
}

三 ios 对click有兼容性 设置样式 cursor:pointer;
四、移动端input框 在手机页面中无法输入文字的问题
-moz-user-select: none;
-webkit-user-select: none;

点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Easter79 Easter79
3年前
swal() 弹出层的用法
swal()方法是一个提示框;swal({title:"",text:"请扫描用户手机上的付款码",type:"input",showCancelButton:true,closeOnConfirm:false,canc
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Stella981 Stella981
3年前
PHP导入导出EXCELl,CSV
PHP导入导出Excel,CSVHTML<formaction"{:U('Admin/Unit/importcsv')}"method"post"name"myform"id"myform"enctype"multipart/formdata"<input
Stella981 Stella981
3年前
ReactNative遇到的坑总结(持续更新)
问题:在Android中input组件,文字会有遮挡在Android中,input组件默认会有内边距,所以把padding改为0可以解决问题问题:在Android中input组件,底部会有条白线添加红色的属性underlineColorAndroid<TextInputplaceholder"搜索关键字"
Stella981 Stella981
3年前
JS 苹果手机日期显示NaN问题
问题描述newDate("2019122910:30:00")在IOS下显示为NaN原因分析带的日期IOS下存在兼容问题解决方法字符串替换letdateStr"2019122910:30:00";datedateStr.repl
Stella981 Stella981
3年前
ASP.NET MVC 4 之 Jquery Ajax
//前台界面,一个下拉框,一根文本框<select id"SEX"    <option男</option    <option女</option    <option未知</option</select<input id "DESC"  type"text"/
Stella981 Stella981
3年前
ELK学习笔记之配置logstash消费kafka多个topic并分别生成索引
0x00 filebeat配置多个topicfilebeat.prospectors:input_type:logencoding:GB2312fields_under_root:truefields:添加字段
Stella981 Stella981
3年前
Laravel 控制器的request
publicfunctionrequest1(Request$request){//取值$nameRequest::input('name');//是否有值if($requesthas('name')){echo$requestinput('name');}$res
Stella981 Stella981
3年前
JavaScript获取Input输入框的屏幕绝对位置
需求:使用JavaScript,在input输入框被点击时获取input坐标的绝对位置,原理:根据js中的元素offsetLeft、offsetTop获取相对于父元素的X、Y坐标相对位置,然后遍历到最顶层的body元素,逐步叠加距离,最终获取的位置即为input的绝对位置。代码如下://获取x坐标functiongetXPo
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable