CSS로 숫자 입력 필드(input type=number)의 스핀 버튼 스타일링하는 방법

HTML 폼에서 <input type="number"> 요소를 사용하면 Chrome과 같은 WebKit 기반 브라우저에 기본적으로 위아래 화살표(스피너)가 표시됩니다. 이 스핀 버튼은 일반 CSS 선택자로는 제어할 수 없으며, 전용 가상 요소(pseudo-element)를 사용해야 합니다.

스피너(화살표) 숨기기

숫자 입력 필드에서 기본 스핀 버튼을 제거하려면 ::-webkit-inner-spin-button 가상 요소에 -webkit-appearance: none;을 적용합니다.

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

위 코드를 적용하면 숫자 입력 필드에 스핀 버튼이 더 이상 나타나지 않습니다.

스피너 표시 및 스타일 지정

반대로 스핀 버튼을 항상 표시하고 싶다면 opacity 속성을 활용할 수 있습니다. 기본적으로 Chrome은 입력 필드에 포커스가 있거나 마우스를 올렸을 때만 스핀 버튼을 보여주는데, 아래와 같이 설정하면 항상 화면에 나타나게 됩니다.

input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
}

실행 결과

위 코드를 적용하면 다음과 같이 스핀 버튼이 항상 표시된 숫자 입력 필드를 확인할 수 있습니다.

참고 사항

::-webkit-inner-spin-button은 WebKit 기반 브라우저(Chrome, Safari, Edge 등)에서만 동작하는 비표준 기능입니다. Firefox에서는 별도로 스핀 버튼이 렌더링되지 않으므로 크로스 브라우징을 고려한다면 이 점을 유의해야 합니다.