IT TIP

"숫자"를 입력 할 때 항상 위쪽 / 아래쪽 화살표를 표시 할 수 있습니까?

itqueen 2021. 1. 6. 20:34
반응형

"숫자"를 입력 할 때 항상 위쪽 / 아래쪽 화살표를 표시 할 수 있습니까?


입력 "숫자"필드에 대해 항상 위 / 아래 화살표를 표시하고 싶습니다. 이것이 가능한가? 지금까지 운이 없었습니다 ...

http://jsfiddle.net/oneeezy/qunbnL6u/

HTML :

<input type="number" />

CSS :

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}

Opacity 속성을 사용하여 최소한 Chrome에서이 작업을 수행 할 수 있습니다.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

위에서 언급했듯이 이것은 Chrome에서만 작동합니다. 따라서 다른 브라우저에 대한 대체없이이 코드를 야생에서 사용하는 데주의하십시오.


다른 브라우저에서 동일한 모양을 얻으려면 플러그인 / 위젯을 사용하거나 직접 빌드해야 할 수 있습니다. 기본 브라우저는 모두 숫자 스피너를 다르게 구현하는 것 같습니다.

스타일링과 관련하여 훨씬 더 다양한 기능을 제공하는 jQuery UI의 스피너 위젯을 사용해보십시오 .

작업 예

<p>
    <label for="spinner">Select a value:</label>
    <input id="spinner" name="value" />
</p>

$("#spinner").spinner();

참조 URL : https://stackoverflow.com/questions/25194631/is-it-possible-to-always-show-up-down-arrows-for-input-number

반응형