Safari에서 CSS가 작동하지 않습니다.

Question

내 검색 입력에 대한 CSS 클래스가 Safari에서 작동하지 않는 이유를 알려주실 수 있습니까? Chrome에서는 훌륭하게 작동하며 Firefox에서는 괜찮습니다. Safari는 'sb-search-input'클래스에 설정된 CSS 규칙을 인식하지 못하는 것 같습니다.

정말 알아낼 수 없습니다.

감사합니다 ...

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

마크 업 :

<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

사파리가 꽤 하드 <input type="search">에 대한 사용자 에이전트 스타일에 보유하고 있습니다.

에 -webkit-appearance: textfield;을 추가하면 규칙이 적용됩니다.

더 많은 정보와 가능한 스타일은 여기에 우선 : http://priyanksharma.com/code-snippets/resetting-html5-search-input-in-webkit/