html5 input type search css

html5에서 input type="search" 를 할 경우 패딩이 width 에 포함되는데요.

예를 들어 input 의 css 가 width:200px;padding:20px; 일 경우라 했을때

일반적으로는 width + padding 값이 input 의 wdith 값이 되므로 width 값은 240이 되어야되는데

input type="search" 의 경우 width + padding 값이 240이 아닌 width 설정값인 200이 되는것을 확인 할 수 있는데요.

이부분을 맞추기 위한 css를 정리하였습니다.

ie 계열과 파이어폭스 같은 경우엔 안그러는데 꼭.. 이 크롬만 이러네요~ 크롬 user agent stylesheet 에 삽입되는 것을 아래 보시다 싶이 box-sizing:border-box; 가 삽입되는 걸 보실 수 있습니다.

user agent stylesheet

input[type="search" i] {

1. -webkit-appearance:searchfield;
2. box-sizing: border-box;

}

아래의 예제를 보시죠!!

아래의 경우 input type="text" 와 input type="search" 의 비교사진입니다.

이제 해결을 해야되는데요.. 아래와 같이 해결가능합니다.

box-sizing:content-box 라는 css만 삽입해주면 되는 걸로 확인되었습니다.

이거때문에 ie 핵을 쓰려 고민했다니 OTL.... 좌절이였습니다.

한동안 구글링하며 찾아보니 없더라구요 ㅠ_ㅠ 결국 크롬의 스타일시트때문이였습니다.