正如标题所示,以下代码的输出在safari浏览器上没有显示：
1) Border of input type-search not showing
2) text-transform: uppercase doesn’t work.
HTML：
<div class="searchLob">
<input type="search" class="searchInput" placeholder="Search the website"></input>
<button onclick="Submit();" class="searchInputBtn">Search</button>
</div>
CSS：
.searchLob{
position: relative;
display: inline-block;
}
.searchInput{
position: relative;
border: 2px solid #d2d4d8;
height: 44px;
padding: 0 10px;
background-color: #fff;
width: 200px;
margin: 2px 0 0 2px;
float: left;
text-transform: uppercase;
}
.searchInputBtn{
position: relative;
float: left;
border: medium none;
color: #fff;
cursor: pointer;
font: 14px 'arial';
height: 44px;
margin-left: -4px;
margin-top: 2px;
text-decoration: none;
text-transform: uppercase;
width: 70px;
background-color: #6692a7;
}
.searchInputBtn:hover{
background-color:#547e92;
}
textarea:focus,input:focus,select:focus{
border-color: #cccfd0;
Box-shadow: 0 1px 1px rgba(204,207,208,0.075) inset,0 0 8px rgba(204,1);
outline: 0 none;
}
我也尝试过以下方法：
CSS：
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
color:red;
}
/* Safari only override */
::i-block-chrome,.myClass {
color:blue;
}
}
使它适用于野生动物园,但没有做任何事情.
我该怎么办？
？
[我正在使用Safari浏览器版本：5.1.7(Build：7534.57.2)]
解决方法
如果删除所有CSS,并检查Safari中的元素,您会注意到用户代理样式表中添加了很多CSS – 这是浏览器的默认样式表,因浏览器而异.
例如,这是添加到输入的一些默认样式：
input[type="search"] {
-webkit-appearance: searchfield;
Box-sizing: border-Box;
}
user agent stylesheet
input,input[type="password"],input[type="search"],isindex {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
user agent stylesheet
:focus {
outline: 5px auto -webkit-focus-ring-color;
}
正如博客文章中提到的 – Resetting HTML5 Search Input in Webkit
>归功于Priyank Sharma
/* Reset HTML5 Search Input in Webkit */
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration {
-webkit-appearance:none;
}
input[type=search] {
-webkit-appearance:textfield;
-webkit-Box-sizing:content-Box;
}
因此,如果你现在检查小提琴 – http://jsfiddle.net/Hg2A6/8/,你会发现它得到了正确的造型
