幅の異なる複数の数値入力

Question

スタイルシートのサイズを調整した複数の数値入力ボックスがあるWebサイトがありますが、各数値ボックスの幅はピクセル単位で指定してください。入力タイプ番号がwidthパラメータをリッスンしないので、ボックスの幅を個別に変更しても何も見つかりませんでした。ピクセル数の幅を入力ボックスごとに異ならせる方法はありますか？または、それらをテキスト入力に変更し、数字だけを受け入れる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を与えるために良いことだ：あなたは、特定のn番目の入力ボックスを選択したい場合は

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

あなたはこのようにCSSセレクタを使用することができます。

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

このすべてを実際に見るには、JSFiddleをチェックしてください。複数の異なった答えがあるだろうので