我想始終顯示輸入“數字”字段的上/下箭頭。這可能嗎？到目前為止，我還沒有任何運氣... 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";

}

您可以通過使用不透明度屬性來實現這一點(至少在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的spinner小部件，它在樣式方面提供了更多的功能。

工作示例

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

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

我試過了，它起作用了

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

對我來說，只有額外的CSS設置有幫助:

<style>
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button 
  {
    opacity: 1;
  }

  input[type=number]::-webkit-outer-spin-button, 
  input[type=number]::-webkit-inner-spin-button 
  {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
  }
</style>