[CSS] input[type="number"] 증가,감소 화살표 없애기

input[type="number"]을 사용하면 아래 이미지처럼 마우스 오버 시 오른편에 증감 화살표 버튼이 저절로 생긴다.

 

 

요즘에는 이런 기본 버튼을 사용하는걸 사실 본 적이 없다.
필요하다면 본인들의 디자인 컨셉에 맞추어서 버튼까지 커스텀하는 게 대부분인 것 같다.

 

각설하고, 바로 없애보자.

 

---

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin: 0;
}

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

위의 css를 적용하면 아래 이미지처럼 화살표가 사라진다.

 

 

매우 간단하니 쉽게 적용해볼 수 있다!

 

---

근데 왜 초기값이 화살표가 있는 것인지 궁금해서 mdn을 찾아보았다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

<input type="number"> - HTML: HyperText Markup Language | MDN

The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by tapping with a fingertip. 

 

저 증감 화살표를 'stepper arrows'라고 하며, 마우스 사용으로도 숫자를 적용할 수 있도록 기본적으로 제공한다고 적혀있었다.

아마 접근성적인 측면에서 다양하게 데이터를 입력할 수 있도록 다양한 수단을 제공한 것으로 보인다.