[css] <input>을 디자인할 때 주의할 점 – border

엘리먼트는 보더가 none인 게 디폴트이지만 인풋은 예외다. 인풋은 보더를 가지고 만들어지므로 당연히 그 보더에는 기본적으로 스타일도 적용되어 있다. 그런데 특이하게도 인풋에 보더 스타일을 추가하면 만들어질 때 적용된 스타일이 사라진다.

아무 스타일도 적용하지 않고 인풋을 만들면 모서리에 픽셀 하나가 빠져서 radius가 살짝 적용된 거처럼 보인다. 하지만 아래의 코드를 실행하면 모서리는 직각으로 바뀌고 border-style도 outset으로 설정된다. 그리고 클릭을 하면 inset로 바뀐다.

<input style="border-width: 10px;">

이러한 사정을 모르고 인풋의 모양을 바꾸면 원하던 디자인으로 나오질 않아서 의아해할 수 있다. 뿐만 아니라 border-style을 solid로 하면 클릭을 한 때 아무 반응도 나타나지 않는 등 보더 스타일을 건드리면 무척 복잡해진다.