我有一个正常工作的网站,除了输入字段和旁边的提交按钮。它们在iPad上无法正常显示。输入框的高度略高于提交按钮,使其看起来很奇怪。
我个人认为iPad是safari-mobile,具有不同的视口(1024px)等,但呈现与Chrome相同的webkit外观。那么为什么iPad上的输入框显示不同?
以下是我在桌面上使用Google Chrome浏览器的效果:
以下是它在iPad上的外观:
HTML部分简单如下:
<div id="search-form">
<input id="Search" class="defaultText defaultTextActive" title="search shzamm!" type="text" spellcheck="false">
<input onclick="javascript:someFunction();" type="button" value="Go" class="search_btn">
</div>
同样的CSS是:
#search-form {
overflow: auto;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 26px;
}
input#Search {
-webkit-appearance: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.defaultText {
width: 88%;
padding-left: 4px;
height: 29px;
float: left;
background-color: #f7f7f7;
border-right: 0px solid #666;
border-bottom: 1px solid #666;
border-color: #999;
margin-right: -33px;
}
.defaultTextActive {
color: #999;
font-style: italic;
font-size: 15px;
font-weight: normal;
}
.search_btn {
font-size: 13px;
font-weight: bold;
height: 34px;
cursor: pointer;
float: right;
margin: 0;
width: 33px;
background: url("../images/search.jpg") no-repeat;
text-indent: -99999px;
border: 1px solid #999;
border-top: 2px solid #000;
margin-top: 0px;
margin-right: 1px;
}
正如您所看到的,输入的边框效果也未在iPad中正确呈现。任何人都有任何线索吗?
答案 0 :(得分:5)
这段CSS将从文本框中删除默认的WebKit样式:
input[type="text"] {
-webkit-appearance : none;
border-radius : 0;
}
也适用于iOS 7。
答案 1 :(得分:4)
尝试使用-webkit-appearance来摆脱默认样式。
检查此问题: iOS forces rounded corners and glare on inputs https://stackoverflow.com/a/14758383
答案 2 :(得分:0)
请使用:
-webkit-appearance:无;