[HTML] 숫자 타입 input 스크롤 이슈 해결

숫자 타입 input에 자동으로 생기는 화살표를 제거하고 싶다면. 아래 css를 추가하면 된다.

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

 

input[type=number] 부분은 적절히 다른 select로 변경할 수 있다.

 

number type을 클릭하고 커서를 올린 채 wheel 이벤트를 발생시키면 숫자가 오르락 내리락 하는데, 이를 막고 싶다면 TypeScript + React에서는 다음과 같이 하면 된다.

<NumberInput
  style={{marginTop: "16px"}}
  type={"number"}
  value={state}
  onChange={onChanged}
  onWheel={event => (event.target as HTMLElement).blur()}
/>

핵심은 onWheel 이벤트가 발생하는 경우, blur 시키는 것.