CSS를 활용하면 숫자 입력 필드(input type="number")에 브라우저가 기본적으로 표시하는 화살표(스피너) 버튼을 손쉽게 제거할 수 있습니다. 아래 예제 코드를 통해 그 방법을 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<h1>숫자 입력 필드 화살표 숨기기</h1>
<input type="number" value="10">
<h2>위 입력란에는 숫자만 입력할 수 있습니다</h2>
</body>
</html>
코드 설명
- ::-webkit-outer-spin-button / ::-webkit-inner-spin-button — 크롬, 사파리 등 웹킷 기반 브라우저에서 표시되는 외부·내부 스피너 버튼입니다.
-webkit-appearance: none;으로 지정하면 해당 요소가 화면에 나타나지 않으며,margin: 0;을 함께 적용해 불필요한 여백까지 제거합니다. - -moz-appearance: textfield — 파이어폭스는 별도의 스피너 선택자가 없으므로, 숫자 입력 필드를 일반 텍스트 필드처럼 렌더링하도록 설정하여 스피너를 숨깁니다.
이 두 가지 규칙을 함께 사용하면 주요 브라우저 전반에서 일관되게 화살표가 제거된 깔끔한 숫자 입력 필드를 만들 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
