safari浏览器下 input 表单的阴影

之前写了一个登录表单页面,再iphone上测试遇到了一些奇怪的问题:表单中的input[type=”submit”]按钮在iPhone的safari浏览器下会出现圆角的情况;input[type=”text”]文本输入框会有内阴影,这些问题该怎么处理呢?
阴影图片:

正常图片:

在IOS下,input 表单默认会有个内阴影,一定程度上影响视觉一致,可通过设置下面代码去掉:

input{
-webkit-appearance: none;
}

如果你还没有碰到,或者你也在开发移动端web,都希望你记住这个小技巧,因为当你在制作中碰到这样的问题时,不会为此抓破头皮,能解决你问题。

时间: 2022-12-13

safari浏览器下 input 表单的阴影的相关文章

浏览器兼容性-chrome浏览器li下显示input表单宽度总大于IE浏览器

问题描述 chrome浏览器li下显示input表单宽度总大于IE浏览器 解决方案 input宽度设置了没有?要不每个浏览器input默认宽度不一样 解决方案二: 你自己设置个input的固定宽度

jquery 动态增加,减少input表单的简单方法(必看)_jquery

html代码如下 <html> <tr><button style="margin-left:10px" class="add_field_button btn">Add</button></tr> <tbody class="input_fields_wrap"></tbody> </html> js代码如下 <script> var m

asp.net 2.0 下的表单验证Cookieless属性

asp.net|cookie|表单验证 刚刚在洗衣服的时候突然想到今天在做WAP程序的表单验证的时候遇到一个问题,在不支持Cookies的移动设备模拟器中无法正常进行表单验证,联想到昨天使用web.config设置cookieless属性时会在访问时会出现"Cannot use a leading .. to exit above the top directory"的异常,自然而然的我就想到了前一段时间困扰我很久的一个站点异常无法使用前导 .. 在顶级目录上退出(Cannot use

asp.net 2.0下的表单验证Cookieless属性

刚刚在洗衣服的时候突然想到今天在做WAP程序的表单验证的时候遇到一个问题,在不支持Cookies的移动设备模拟器中无法正常进行表单验证,联想到昨天使用web.config设置cookieless属性时会在访问时会出现"Cannot use a leading .. to exit above the top directory"的异常,自然而然的我就想到了前一段时间困扰我很久的一个站点异常无法使用前导 .. 在顶级目录上退出(Cannot use a leading .. to exi

UC浏览器怎么设置表单保存

  有很手机用户都在使用uc浏览器,使用表单密码可以很方便的帮你保存常用网站的用户名密码,下面西西小编就告诉大家UC浏览器设置表单密码的方法.(西西小编提醒:如在操作关于资金的帐户时,请慎用使用"自动保存表单密码"功能,防范支付功能被盗取) 1)首先点击UC浏览器的菜单键,点击设置,再点击系统设置;(如下图所示) 2)在基本设置中往下拉,看到表单保存,点击下拦框,就可以选择你想要设置的类型;(如下图所示) 3)表单保存总有三种方案供选择,一是提示保存,二是自动保存,三是不保存.你可根据

javascript下阻止表单重复提交、防刷新、防后退_表单特效

1 服务器端的解决方法.这是我最为推荐的方法.优点是判断准确,兼容性最大.  做法:a页面显示表单,然后提交b页面处理,处理完后重定向到c页面显示结果.  1.0 在访问a页面时在session里生成一个标志ID,例如  //伪代码  session("submitID")=random()  然后把这个值写到表单的一个hidden的input里  //伪代码  <%response.write("<input name=submitID2 type=hidden

js监听表单value的修改同步问题,跨浏览器支持_表单特效

想要实现的功能大概是这样的: 有两个文本框,其中一个只读,另一个可以输入.要求在可输入文本框中输入文本时,只读文本框能够获得输入的值,且只读文本框旁边出现提示信息,实时显示只读文本框的内容. 这个功能看是简单,但其实并没有想象的那么简单.(注意,可输入框的处理没什么可讨论的,关键是只读框的处理) 一开始,我们一般会想到在只读文本框上运用onchange事件.一试,发现onchange根本没用,该事件是在文本框获得焦点,然后内容改变失去焦点后才触发的,现在在只读文本框上根本没有这些,它的内容是通过

ASP.net Menu控件在Google Chrome和Safari浏览器下显示错位的解决办法_实用技巧

复制代码 代码如下: <browsers> <browser id="Safari3" parentID="Safari1Plus"> <identification> <useragent match="Safari/\d+\.\d+" /> </identification> <capture> <useragent match="Version/(?'v

超简单的取消chrome浏览器下input和textarea的默认样式

 代码如下 复制代码 input,button,select,textarea{outline:none} textarea{resize:none}