首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >iOS在输入上强制圆角和眩光

iOS在输入上强制圆角和眩光
EN

Stack Overflow用户
提问于 2011-09-29 23:17:01
回答 6查看 90.9K关注 0票数 95

iOS设备在表单输入上添加了很多恼人的样式,尤其是在inputtype=submit上。下面显示的是桌面浏览器和iPad上相同的简单搜索表单。

桌面:

iPad:

inputtype=text使用了一个CSS方框阴影插页,我甚至指定了-webkit-border-radius:none;它显然被覆盖了。在iPad上,我的inputtype=submit按钮的颜色和形状变得非常糟糕。有人知道我能做些什么来解决这个问题吗?提前谢谢。

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2011-10-25 01:04:36

我工作的版本是:

代码语言:javascript
复制
input {
    -webkit-appearance: none;
}

在某些webkit浏览器版本中,您可能还会遇到border-radius仍然存在的问题。使用以下内容进行重置:

代码语言:javascript
复制
input {
    -webkit-border-radius:0; 
    border-radius:0;
}

这可以扩展到所有webkit样式的form组件,如inputselectbuttontextarea

在引用原始问题时,当清除任何基于单位的css元素时,您不会使用值'none‘。还要注意的是,这会隐藏Chrome中的复选框,所以可以使用input[type=text]input[type=submit], input[type=text]之类的设置,或者过滤掉那些不使用圆角设置的复选框,比如input:not([type=checkbox]), input:not([type=radio])

票数 186
EN

Stack Overflow用户

发布于 2013-02-08 02:30:54

你可以用下面的代码去掉更多的webkit表单、输入等样式:

代码语言:javascript
复制
input, textarea, select {
   -webkit-appearance: none;
}
票数 17
EN

Stack Overflow用户

发布于 2012-04-03 19:50:45

对于提交按钮,不要使用:

代码语言:javascript
复制
<input type="submit" class="yourstylehere" value="submit" />

请改用按钮标记:

代码语言:javascript
复制
<button type="submit" class="yourstylehere">Submit</button>

这对我很有效。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7599533

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档