Question

所以我有一个带有多个数字输入框的表单的网站，我已经调整了样式表中的大小，但我想要的是每个数字框都有自己的宽度（以像素为单位）。由于输入类型编号不会侦听宽度参数，因此无法单独更改框的宽度。有没有办法让每个数字输入框的宽度以像素为单位不同？或者我是否必须将它们更改为文本输入并编写JavaScript函数以仅接受数字？

Answer 1

由于你的问题很广泛，我把一个小提琴放在一起，显示我在“我的”页面上选择输入元素的3种常用方法，这是高度自以为是的，所以会有多个不同的答案，请参阅小提琴：https://jsfiddle.net/5f3pbg8b/3/

作为一个快速参考，w3fools有一个很好的选择器列表http://www.w3schools.com/cssref/css_selectors.asp

html示例1

<h4>
With classes best option
</h4>
<input type="text" class="input1"/>
<input type="text" class="input2"/>
<input type="text" class="input3"/>
<input type="text" class="input4"/>
<input type="text" class="input5"/>

CSS示例1

.input1{width: 50px; background: yellow;}
.input2{width: 100px; background: yellow;}
.input3{width: 150px; background: yellow;}
.input4{width: 200px; background: yellow;}
.input5{width: 250px; background: yellow;}

HTML示例2

<h4>
With placeholder value
</h4>
<input type="text" placeholder="input1"/>
<input type="text" placeholder="input2"/>
<input type="text" placeholder="input3"/>
<input type="text" placeholder="input4"/>
<input type="text" placeholder="input5"/>

CSS示例2

input[placeholder="input1"]{width: 50px; background: blue;}
input[placeholder="input2"]{width: 100px; background: blue;}
input[placeholder="input3"]{width: 150px; background: blue;}
input[placeholder="input4"]{width: 200px; background: blue;}
input[placeholder="input5"]{width: 250px; background: blue;}

HTML示例3

<h4>
With nth-child selector
</h4>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>

CSS示例3

input:nth-child(14) {
    width: 50px;
    background: #ff0000;
}
input:nth-child(15) {
    width: 100px;
    background: #ff0000;
}
input:nth-child(16) {
    width: 150px;
    background: #ff0000;
}
input:nth-child(17) {
    width: 200px;
    background: #ff0000;
}
input:nth-child(18) {
    width: 250px;
    background: #ff0000;
}

Answer 2

您可以将宽度设置为数字输入字段。如果你想单独设置输入框，可以给它们这样的ID：

<input id="two" type="number"/>

如果要选择某个第n个输入框，可以使用如下的css选择器：

input[type="number"]:nth-child(3)

如果您希望查看所有这些内容，请查看此JSFiddle。

多个不同宽度的数字输入

2 个答案: