使HTML5数字输入的旋转框始终在chrome上可见，就像mozilla一样？

Question

Chrome上的当前行为仅在用户将鼠标悬停在其上时显示：

默认情况下，该旋转框不可见：
  

但在Mozilla中，它始终可见：

如何在chrome中始终显示旋转框？

https://jsfiddle.net/JerryGoyal/u4qoLcp4/

<input class="FlaggingPeriodTextBox" style=" width: 61px;    text-align: right;font-family: Segoe UI;margin-top: 9px;" type="number" min="1" max="999" value="7">

Answer 1

jsFiddle

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button {
opacity: 1 !important;
}

<input class="FlaggingPeriodTextBox" style=" width: 61px;    text-align: right;font-family: Segoe UI;margin-top: 9px;" type="number" min="1" max="999" value="7">

-

Answer 2

旋转始终存在，您只需要定位旋转，在您的情况下是内部旋转按钮并将不透明度设置为1

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

Fiddle

Answer 3

如果你想要jquery还有其他解决方案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
    $( "#spinner" ).spinner();
   });


</script>
 <p>
<input id="spinner" name="value" />
</p>

但您需要包含jqueryUI 点击这里working example