CSS не работает в Safari

Question

Может кто-нибудь сообщит мне, почему класс CSS для моего входа в поиск не работает в Safari? Он отлично работает в Chrome и работает в Firefox. Кажется, что ни один из правил CSS, которые были установлены в классе «sb-search-input», не распознается Safari.

Действительно не может понять это!

Благодаря ...

URL: 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; 
} 

Markup:

<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/