[CSS] Html input 에서 오른쪽 화살표, type='number' 의 버튼 없애기 ( 증가,감소 버튼)

input태그 사용시 type=”number” 로 지정하면 아래와 같은 현상이 나타날 때가 있습니다.

바로 화살표 증가, 감소 버튼이 생겨버리는데요.

간단히 없앨 수 있는 방법이 있습니다.

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

위의 코드를 styleSheet 에 적용하시면 됩니다.

• 결과