Safari에서 input type="search"에 스타일이 맞지 않음

Safari에서 <input type="search"> 에 스타일이 맞지 않는 버그가 있습니다 1

index.html
<input class="search-field" type="search" placeholder="キーワードから探す" />

style.css
.search-field {
    box-sizing: border-box;
    width: 180px;
    height: 40px;
    padding-left: 10px;
    border: solid 2px red;
}


어째서! 직접 style 속성을 만져도 !important 를 붙여도 효과 없음….

style.css
.search-field {
    box-sizing: border-box;
    width: 180px;
    height: 40px;
    padding-left: 10px;
    border: solid 2px red;
    -webkit-appearance: textfield; /*これを追加*/
}
-webkit-appearance: textfield; 를 덧붙여 주면, 기대대로의 표시가 되었습니다.

이 기사 이나 이 기사 를 보면 2010년부터 방치되고 있는 것 같네요…



버전 12.1 (14607.1.40.1.4)에서 발생 확인

좋은 웹페이지 즐겨찾기