在chrome中恢复输入类型=数字微调器

Question

我有一个主题基于Metro UI CSS 的应用程序，它隐藏了（我认为）Chrome 在使用<input type="number" /> 时添加的漂亮且有用的微调器。

我正在尝试“覆盖”此规则，但我无法弄清楚我必须将其设置为什么值：

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: initial !important;
}

不起作用（请参阅FIDDLE）。

恢复它们的正确值是多少？

P.S.：我试图避免只是从基本 CSS 中删除规则以避免更新问题...

Answer 1

将-webkit-appearance 设置为inner-spin-button，即按钮的默认值。

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

Answer 2

在 Chrome v67.0.3396.87 上测试：

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    /*-webkit-appearance: inner-spin-button !important;*/
    opacity: 1;
    margin-left: 5px;
}

<input type="number"/>

更改 -webkit-appearance 属性似乎没有任何影响；除了悬停时，它没有显示微调器，无论如何这是默认行为。

更改不透明度按预期工作。无论是否悬停，微调器始终可见。这个技巧的功劳归于https://codepen.io/BJack/pen/FHgtc

Answer 3

此外，我需要将微调器隐藏（根据默认设置）或始终显示，所以这里是完成这三个操作的方法。很难获得这些信息。

/* disable globally if required */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* restore to hidden until mouse over */
.show_spinner input[type='number']::-webkit-outer-spin-button,
.show_spinner input[type='number']::-webkit-inner-spin-button {
   -webkit-appearance: inner-spin-button;
}

/* restore and show permanently */
.show_always input[type='number']::-webkit-outer-spin-button,
.show_always input[type='number']::-webkit-inner-spin-button {
   -webkit-appearance: inner-spin-button;
   opacity: 1;
   margin-left: 10px;
}

<!-- disabled spinners -->
<input type="number">

<!-- restore to hidden until mouse over -->
<div class="show_spinner">
    <input type="number" class="show_spin">
</div>

<!-- restore and show permanently -->
<div class="show_always">
    <input type="number" class="show_spin">
</div>

Answer 4

我非常努力地从移动浏览器（如移动 Chrome）中恢复箭头，但以下代码不起作用

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    /*-webkit-appearance: inner-spin-button !important;*/
    opacity: 1;
    margin-left: 5px;
}

最终我决定制作一些侧边按钮。我编写了代码，您可以根据需要添加任意数量的按钮。我邀请您查看其他类似帖子中的 sn-p。

改进 在这个 sn-p 中，当用户按住按钮时，我添加了自动增量

https://stackoverflow.com/a/70957862/13795525

初始 https://stackoverflow.com/a/68679616/13795525