CSS不能在Safari中工作

Question

有人可以讓我知道爲什麼我的搜索輸入的CSS類在Safari中不起作用嗎？它在Chrome中運行良好，在Firefox中運行良好。看起來好像沒有任何已經在類的sb-search-input上設置的CSS規則被Safari識別。

真的搞不懂！

謝謝...

網址：http://www.bboyrival.com/

CSS：

.sb-search { 
    position:absolute; 
    top:5px; 
    right:80px; 
    z-index:99998; 
    margin-top:35px; 
    width:0%; 
    min-width:40px; 
    height:40px; 
    float:right; 
    overflow:hidden; 
    -webkit-transition: width 0.3s; 
    -moz-transition: width 0.3s; 
    transition: width 0.3s; 
    -webkit-backface-visibility:hidden; 
} 
.sb-search-input { 
    position:absolute; 
    top:0; 
    right:0; 
    border:none; 
    border-radius:1px; 
    outline:none; 
    background:#fff; 
    width:20%; 
    height:40px; 
    margin:0; 
    z-index:10; 
    padding: 15px 65px 15px 20px; 
    font-family:inherit; 
    font-size:13px; 
    font-weight:200; 
    color:#2c3e50; 
} 
.sb-search-input::-webkit-input-placeholder { 
    color: #0F171C; 
} 

.sb-search-input:-moz-placeholder { 
    color: #0F171C; 
} 

.sb-search-input::-moz-placeholder { 
    color: #0F171C; 
} 

.sb-search-input:-ms-input-placeholder { 
    color: #0F171C; 
} 
.sb-icon-search, 
.sb-search-submit { 
    width:40px; 
    height:40px; 
    display: block; 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding: 0; 
    margin: 0; 
    line-height: 50px; 
    text-align: center; 
    cursor: pointer; 
} 

.sb-search-submit { 
    background: #2d85a2; /* IE needs this */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ 
    filter: alpha(opacity=0); /* IE 5-7 */ 
    opacity: 0; 
    color: transparent; 
    border: none; 
    outline: none; 
    z-index: -1; 
} 

.sb-icon-search { 
    background-image:url(../images/searchicon.png); 
    background-position:center; 
    background-repeat:no-repeat; 
    background-size:contain; 
    -webkit-background-size:contain; 
    -moz-background-size:contain; 
    -o-background-size:contain; 
    z-index: 90; 
    background-color:#2d85a2; 
    -webkit-transition: all ease 1s; 
    -moz-transition: all ease 1s; 
    -o-transition: all ease 1s; 
    -ms-transition: all ease 1s; 
    transition: all ease 1s; 
} 
.sb-icon-search:hover { 
    background-image:url(../images/searchiconhover.png); 
} 

.sb-icon-search:before { 
    content: ""; 
} 

/* Open state */ 
.sb-search.sb-search-open, 
.no-js .sb-search { 
    width:100%; 
} 

.sb-search.sb-search-open .sb-icon-search, 
.no-js .sb-search .sb-icon-search { 
    z-index: 11; 
} 

.sb-search.sb-search-open .sb-search-submit, 
.no-js .sb-search .sb-search-submit { 
    z-index: 90; 
} 

標記：

<form> 
     <input class="sb-search-input" placeholder="Search..." type="search" value="" name="search" id="search"> 
     <input class="sb-search-submit" type="submit" value=""> 
     <div class="sb-icon-search"></div> 
</form> 

Answer 1

Safari瀏覽器持有到用戶代理樣式<input type="search">相當困難。

將-webkit-appearance: textfield;添加到您的.sb-search-input{}規則將會做你以後的事情。

更多信息和可能的樣式將覆蓋在這裏：http://priyanksharma.com/code-snippets/resetting-html5-search-input-in-webkit/