你可以通过使用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">

Found Here

如果你试图在不同的浏览器上获得相同的外观，你可能会被迫使用插件/小部件或自己构建一个，主要的浏览器似乎都实现了不同的数字微调器。
尝试jQuery UI's spinner widget，它提供了更多的多功能性，当谈到造型。

Working Example

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