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

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

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

最终我决定制作一些侧面按钮。我编写了代码，您可以根据需要添加任意数量的按钮。我邀请您查看另一个类似帖子中的片段。

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

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

4 个答案: