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

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

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에서만 작동합니다. 따라서 다른 브라우저에 대한 대체없이이 코드를 야생에서 사용하는 데주의하십시오.

나는 이것을 시도했고 효과가 있었다

input[type=number]::-webkit-inner-spin-button {
    opacity: 1
}

</style>
<input type="number" value="1" min="1" max="999">

여기에서 발견

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

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

작업 예

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

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

입력에 초점을 맞춰도 괜찮다면

   document.getElementById(<id>).focus();