[CSS] input type="number" 스핀 버튼 제거

input 태그의 type 중 number를 기본적으로 사용하게 되면 숫자의 값을 조절하는 화살표 기능(스핀 버튼)이 생긴다.("form-control" 클래스는 bootstrap에서 제공하는 클래스이다.)

<input type="number" name="phoneNum" id="phoneNum" class="form-control" placeholder="휴대전화번호를 입력해주세요." required>

브라우저마다 표시되는 스타일이 다르다.

/* WebKit 및 Blink 기반 브라우저 */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

• ::-webkit-inner-spin-button 가상 요소는 숫자 선택기 입력 요소의 스피너 버튼 내부 스타일을 지정하는데 사용한다.

• ::-webkit-outer-spin-button 가상 요소는 숫자 선택기 입력 요소의 스피너 버튼 외부 스타일을 지정하는데 사용한다.

이 두 가지 선택자는 WebKit 및 Blink 기반 브라우저(예: Chrome, Safari, Edge, Opera, Brave Vivaldi 등)에서만 작동한다.

• -webkit-appearance: none;
  : 기본적으로 표시되는 브라우저 스타일을 제거해서 숫자 입력 필드에서 화살표 버튼을 보이지 않게 한다.

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

• -moz-appearance: textfield;
  : 이 속성은 Mozilla 기반 브라우저(주로 Firefox)에서 요소의 외관을 제어한다. 해당 속성을 사용하면 숫자 입력 필드가 기본적으로 제공하는 화살표 버튼을 제거하고, 일반 텍스트 필드처럼 보이게 만든다.