web-dev-qa-db-ja.com

入力「番号」に常に上矢印/下矢印を表示することは可能ですか？

入力「番号」フィールドに上/下矢印を常に表示したい。これは可能ですか？今まで運がなかった...

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";

}
html5css3inputwebkitshadow-dom
54
Oneezy

Opacityプロパティを使用して、これを達成できます（少なくともChromeで）：

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

   opacity: 1;

}

前述のように、これはおそらくChromeでのみ機能します。そのため、他のブラウザにフォールバックすることなく、このコードをワイルドで使用するよう注意してください。

110
BJack

異なるブラウザ間で同じ外観を取得しようとしている場合、プラグイン/ウィジェットを使用するか、自分でビルドすることを余儀なくされる可能性があります。

jQuery UIのスピナーウィジェット を試してみてください。

実施例

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

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