html数字输入字段总是显示微调器？

Question

当我创建一个这样的数字输入字段时：

<input type="number" />

每当我将鼠标悬停在字段上时，数字字段会添加一个微调器。很多人都在讨论如何禁用这些旋转器：

http://css-tricks.com/snippets/css/turn-off-number-input-spinners/

但我想知道你是如何让它们始终可见而不仅仅是当你将它们悬停在它们上面时？

Answer 1

Chrome不透明度设置令您头疼。这将解决您的问题：

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

这是一个不透明的问题。

Answer 2

要让微调器始终显示，请在Schneeez的答案中省略“：hover”。

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

Answer 3

使用浏览器特定样式无法执行此操作。 您需要使用一些Javascript自己构建该功能，或者在interwebs上查找预制脚本。

您只能隐藏那些Shadow DOM元素，因为它们会触发特定于浏览器的css-attributes来提供onclick或onhover等功能。

请参阅：http://css-infos.net/property/-webkit-appearance（您可能会触发输入字段的其他行为，但您无法强制它始终可见）