css - 在移动设备上使用 type=number 时设置不同的输入宽度时遇到问题

Question

我有 2 个 type="number"输入(用于移动设备)，我试图为每个输入设置不同的宽度。

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

#someid 输入{ width:50px; 也不起作用

我发现用 type="number"改变输入的唯一方法是做

输入[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 的元素 inside 类为 first 的元素。

它将应用于如下结构:

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

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

希望对您有所帮助!