[Mobile] 모바일웹, 아이폰에서 인풋박스 내 마음대로 바꾸기

webkit 기반의 iPhone은 인풋박스를 자기 마음대로 표현하는 경향이 있습니다. 스타일시트로 보더와 색상을 조정해도 마음대로 되지 않는데요, 오늘은 아이폰에서 보여지는 인풋박스를 마음대로 요리하는 방법에 대해 이야기 하겠습니다. 일단 기본적으로 style을 width:200px; height:30px; border:1px solid #00f; 정도만 주었습니다. 일반 PC에서는 스타일을 준대로 잘 나올텐데요. 아이폰의 사파리로 같은 페이지를 보았을 경우에는 이렇게 보이게 됩니다.

흠,,,,, 일단 모서리가 동그랗게 되어있고, 상단에 그림자가 있는데요. 이래가지곤 원하는 디자인을 만들 수 없겠죠? 주면의 디자인과 어울리지 않을 수도 있고요. 그렇다면 이것을 반듯하게 만들어 보겠습니다. 스타일시트에 다음의 속성을 넣어주면 되는데요.

<style type="text/css">
input {-webkit-border-radius:1px;}
</style>

네, 이제 네모 반듯해졌네요. 그런데, 박스의 상단에 흐릿한 그림자가 있네요. 이게 웬 언밸런스입니까? 위에있는 그림자도 없애야지 더 마음에 들 것 같네요.

<style type="text/css">
input {-webkit-border-radius:1px; -webkit-appearance:none;}
</style>

이렇게 해주면 그림자는 깔끔히 없어지게 됩니다. 볼까요?

이야~ 이제 제가 원하는 스타일이 되었습니다. 깔끔하게 반듯한 테두리만 남게 되었네요. 기분에 좋습니다. ^^ 여러분도 아이폰에서 인풋박스가 마음에 안들게 보일때는 이 방법을 써보세요.

 HTML5 input 의 속성 설명은 여기에서 보실 수 있습니다.

http://dev.w3.org/html5/spec/Overview.html#the-input-element

모바일에도 편안한 인터넷 세상이 올때까지!! 화이팅!