개발/Javascript

[한 줄 팁][CSS][Javascript] <input> 숫자 증가, 감소 항상 표시하기

ENFP Jake 2023. 6. 28. 19:50
728x90
반응형

#  <input type="number"/>의 숫자를 focus가 되지 않아도 표시하는 방법

- <input>은 웹에서 사용자에게서 입력을 받는데 사용되는 HTML 엘레멘트 중 하나입니다. 그 중에서 숫자로 입력을 받는 경우 type="number"로 정의해서 받는데, 별도의 UI 프레임워크를 사용하거나 직접 구현하지 않을 경우, 해당 엘레멘트가 활성화 된 경우에만, 증감 화살표가 표시되는 경우가 있습니다. 본 포스팅에서는 이런 문제를 해결할 수 있는 방법입니다.

 

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: inner-spin-button;    
    opacity: 1;
}

 

728x90
반응형