在Chrome浏览器中恢复“输入类型=数字旋转器”

Question

我有一个应用程序，其主题基于Metro UI CSS，当使用<input type="number" />时，Chrome添加的漂亮且实用的旋转器被隐藏了。

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

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

无法正常工作（请参见FIDDLE）。

正确的值是什么，以便将它们恢复？

附注：我试图避免仅从基本CSS中删除规则，以避免更新问题...

- Christoph Fink

---

这个回答解决了你的问题吗？如何在移动设备和iPad上始终显示数字输入微调器。 - Pietro

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

- quw

---

就是这样了，谢谢。你能告诉我你是在哪里/如何找到这些信息的吗？因为我搜索了很长时间也没有找到这些值。 - Christoph Fink

好的。打开Chrome开发者工具，点击右上角的齿轮按钮。在“常规|元素”下面，有一个“显示用户代理影子DOM”的选项。启用它，然后检查输入元素。展开该元素和#shadow-root (user-agent)子元素。找到您想要样式化的影子元素，并查看样式窗格中被灰色标记的样式。图片 - quw

太好了 - 再次感谢。我已经搜索过开发工具中的那个“功能”了 ;-)... - Christoph Fink

你在哪里，我的朋友？我花了整整一天的时间来解决这个问题。如果我们能在现实生活中见面，我需要亲吻你。非常感谢！ - Henrik Petterson

Answer 2

此外，我需要隐藏旋转器（与默认设置相同）或始终显示，因此以下是完成这三个操作的方法。很奇怪很难获得这些信息。

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

- ChrisAdmin

Answer 3

在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

- OXiGEN

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

最终，我决定制作一些侧边按钮。我编写了代码，您可以添加任意数量的按钮。我邀请您查看此其他类似帖子上的片段。

改进 在此片段中，当用户按住按钮时，我添加了自动递增功能。

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

Initial https://dev59.com/RsDqa4cB1Zd3GeqPaUxv#68679616

- Pietro

---

下次在回答中不要引用其他SO帖子，而是将问题标记为重复。 - Vega

好的，我已经完成了，即使这可能是另一个与此重复的SO问题，因为另一篇帖子是最近发布的。 - Pietro

谢谢。通常情况下，更好措辞或有更全面答案的问题将成为目标，而不考虑时间。 - Vega