HTML数字输入字段始终显示微调器？

Question

4

当我创建一个数字输入框时，代码如下：

<input type="number" />

当我将鼠标悬停在数字字段上时，该字段就会添加一个微调器。很多人谈论如何禁用这些微调器，例如：

但我想知道如何使它们始终可见，而不仅仅在悬停时可见？

- asolberg

1

在这种情况下，您最好使用第三方输入微调器，因为它们在不同的浏览器和平台上表现一致。 - René Roth

3个回答

1

为了使旋转器始终显示，请在Schneeez的回答中省略“：hover”。

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

- Anthony Holland

-2

使用浏览器特定样式不可能实现这一点。您需要使用JavaScript构建该功能或在互联网上查找预制脚本。

只能隐藏那些影子DOM元素，因为它们会触发特定于浏览器的CSS属性，从而提供像onclick或onhover这样的功能。

请参见：http://css-infos.net/property/-webkit-appearance（您可以为您的Input-Field触发另一种行为，但无法强制其始终可见）

- Schneeez

3

这是错误的，请参考下面@Hlynur Davíð Hlynsson的回答。 - Greg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hlynur Davíð Hlynsson · Accepted Answer

是Chrome的不透明度设置让你感到头疼。这将解决你的问题：

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

这个问题有点难懂。