Input, number type의 숫자 롤링을 없애보자

사용자기반 앱/웹 개발을 하다보면 Input은 안쓸수가없다고해도 과언이 아니다.

 

이때, 모바일 입력 편의성 제공을 위해 Input타입을 number로 잡아줬더니

 

숫자롤러가 나타나 디자인을 해치는 일이 발생한 경험이 있을것이다.

 

간단한 css추가로 숫자롤러를 없애보자.

 

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}