<input> 의 type 중 date 나 datetime-local 등을 선택하면 브라우저에 따라 모양이 다른데,


구글 크롬에서는 옆에 값을 조절하는 화살표 "스핀버튼" 이 나타난다.


 (이렇게 위 아래로 화살표가 생기며 한번 클릭 할 때마다 카운트가 하나씩 증감)



경우에 따라서는 간편하게 값을 조절하는 유용한 버튼이지만,


디자인 적인 측면에서는 상당히 보기 싫은 경우가 있다.


이럴 때 이 스핀버튼을 깔끔하게 제거하고 싶다면 아래와 같이 입력한다.




<style>


input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}


</style>




(스타일이 적용된 모습)




스핀버튼이 흔적도 없이 제거된 것을 확인할 수 있다.

+ Recent posts