在移动设备上使用 type=number 时无法设置不同的输入宽度

Question

我有 2 个 type="number" 输入（用于移动设备），我正在尝试为每个输入设置不同的宽度。

.someclass input{ width:50px; } 不起作用

#someid input{ width:50px; } 也不起作用

我发现使用 type="number" 更改输入的唯一方法是这样做

input[type="number"]{ width:50px; }

但又...

.someclass input[type="number"]{ width:50px; } 不起作用

#someid input[type="number"]{ width:50px; } 也不起作用

是否可以使用 type="number" 设置 2 个不同输入的宽度？

Answer 1

感谢您的代码！现在我看到了问题。 :)

.first input[type="number"] 在 CSS 中的意思是“所有input 类型为number 的元素在 类为first 的元素中”。

它适用于如下结构：

<div class="first">
    <input type="number">
</div>

在您的情况下，输入是具有类的输入，您可以使用x-type-element.YClass（这意味着所有具有类YClass的x-type元素）或仅使用类/ID，如these examples。两者都是很好的解决方案，尽管第一个可能会给您带来与旧浏览器（即 Internet Explorer）不兼容的问题。

希望对你有帮助！