スタイルシート input[type="number"]の幅を％で指定したいです！

Question

入力フォーム（住所欄）を作成中に 一部classを振ったものだけ幅を小さくしようとしています。

<div>
	<input type="number" name="zip1"	 value="" placeholder="〒" class="zip btmgn" size="4" />
	 - 
	<input type="number" name="zip2" value="" class="zip btmgn" size="4" />
	<input type="text" name="address1"	 value="" placeholder="都道府県　市町村 番地" class=" btmgn" />
	<input type="text" name="address2"	 value="" placeholder="建物名 部屋番号" class=" btmgn" />
</div>

input[ type="number" ] {
	border: solid 1px #ddd;
	color: #444;
	font-size: 15px;
	padding: 1px 8px;
	line-height: 2.5;
}
input[ type="number" ]:not(.zip){
	width:100%;
}

//郵便番号
input[ type="number" ].zip {
	min-width: 5em;
	width: 20% !important;
}
input[type="number"] {
	-moz-appearance: textfield;
}

要約すると、基本input[type="number"]は幅100％にして「class="zip"」だけ20％にしたいのに...
[size属性]ガン無視で 幅だけゆうこと聞いてくれなくて...不可解でならなくて 昨夜は睡眠不足です。
htmlにインラインで記述すれば効きますが..かっこ悪いので出来ればスタイルシートで収めたいのですが..いい方法はありますか？

Answer 1

CSSでは、//の1行コメントはありません（それに巻き込まれて、以降がおかしくなっています）。/* ... */で書いてください。

あと、そもそも郵便番号をinput[type=number]で作るのは適切ではありません。例えば、札幌市中央区北十二条西（〒060-0012）のように、郵便番号には0始まりのものも存在しますが、input[type=number]はあくまで数値を入れるものなので、頭ゼロが通らないこともあります（MDN）。

Comments

[miyabi_pudding]

>input[type=number]はあくまで数値を入れるものなので、頭ゼロが通らないこともあります（MDN）。
よく考えればそうですよね！
参考になりました。
私はいつも、type="tel"使ってます。
それも、郵便番号に使うのは間違ってるかもしれませんが・・・。

[退会済みユーザー]

maisumakunさま　
ご指摘ありがとうございます。
とんだ..ニアミスでした（涙）
昨夜の自分を呪ってやりたいです。

Answer 2

まさかとは思いますが・・・

「//郵便番号」→「/* 郵便番号 */」

Comments

[退会済みユーザー]

yambejpさま
回答ありがとうございます。
そのまさかでした..
自分のおバカぶりが恥ずかしい事この上なしです（苦笑）

Answer 3

同じように、適用させてみましたが、
width: 20%が効くようです。
適用されないブラウザを記述していただけませんか？
また、以下のことを確認してみてください。

・囲っているdivに幅指定をしっかりしているか。
・要素検証で、どの指定でCSSが適用されているか。
・適用させたいCSSファイルなどが、優先される状態なのかどうか。

Comments

[miyabi_pudding]

そうか、上の方言っている通り、コメント以降のCSSが適用されてないだけだったのですね。
//コメント使いたくなりますよね。

[退会済みユーザー]

miyabi_takatsukさま
ご回答ありがとうございます。^^