让 HTML5 数字输入的旋转框像 mozilla 一样在 chrome 上始终可见？ [复制]答案

【问题标题】：Make HTML5 number input’s spin box always visible on chrome just like mozilla? [duplicate]让 HTML5 数字输入的旋转框像 mozilla 一样在 chrome 上始终可见？ [复制]
【发布时间】：2016-03-21 04:51:55
【问题描述】：

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

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

jsFiddle

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

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

【讨论】：

【解决方案2】：

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

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

Fiddle

【讨论】：

【解决方案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

【讨论】：