스크랩/css,js,jQuery
크롬 input number 지우기 / input number
해용하율임
2018. 5. 11. 14:11
크롬에서 input 태그 사용시 type을 number로 지정할 경우
input field 우측에 숫자 증감에 필요항 콤포넌트가 생성된다.
이게 문제가 되는게 숫자를 우측정렬했음에도 불구하고 readonly 상태의 값이 우측 정렬이 아닌 가운데 정렬로 보일정도로
이 콤포넌트가 공간을 많이 차지하게 된다.
input type number로 지정했을 경우 입력 시 ->
readonly 상태에서 숫자를 우측정렬했음에도 불구하고 거의 가운데에 위치한 것처럼 여백이 생긴다.
그래서 이 아이를 없앨 수 있는 css는
input[type=number]::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0;}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}
위와 같이 넣어주면 된다.
done.