크롬에서 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.
'스크랩 > css,js,jQuery' 카테고리의 다른 글
CSS 가운데(중앙) 정렬 (0) | 2018.03.29 |
---|---|
왼쪽/중앙/우측 div 정렬시 가운데 반응형으로 배치하고 싶을때.... (1) | 2018.03.28 |
CSS SELECTORS AND PSEUDO SELECTORS BROWSER COMPATIBILITY (0) | 2018.03.27 |
div 가운데 정렬하기 (0) | 2018.03.27 |
웹 접근성이 고려된 중첩된 ul 메뉴 네비게이션 가로 및 세로 예제 (0) | 2018.03.25 |