input type="file"の幅と高さ

質問

FireFox12で、ファイルを取り扱うフォーム部品のボックスの高さと幅が変更できません。
type属性がtextboxだとFireFoxでもCSSがちゃんと適用されます。

<input type="file" name="sample" class="test" />

.photo {
width:580px;
height:20px;
}

としていますが、IE8/9 Safari5.1.7/Chrom19では指定した幅と高さになるのですが
FireFoxだけ変化しません。

どうしようもないのでしょうか？

回答No.2

LancerVII · ベストアンサー

こんにちは。

Firefoxのtype="file"については昔のバージョンからwidthやheightが効かないようです。
横幅だけならsize=""で変更できます、
高さは諦めるしかなさそうです。

お礼

＞Firefoxのtype="file"については昔のバージョンからwidthやheightが効かないようです。

そうなんですね・・

なるほど、sizeでいけますか。どうしても横幅だけは変えたかったです。
ありがとうございます。

ちなみに。class名はtestの間違いです。
それでもwidthとheightは適用されません。

.test {
width:580px;
height:20px;
}

回答No.1

ORUKA1951

＞FireFox12で、ファイルを取り扱うフォーム部品のボックスの高さと幅が変更できません。

　質問がわからないのですが・・

　フォームの部品--コントロール( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#h-17.2.1 )--のことだと思いますが、コントロールは「インライン要素( ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 ) )」ですし、非置換インライン要素ですからwidthプロパティは持ちえませんから、どのことを指すのかわからないです。

　文字通り「ファイルを取り扱う[コントロール]のボックスの高さと幅が変更できません。」
でしたら
<form action="./">
　<dl>
　　<dt abbr="ファイル選択">
　　　ファイル
　　<dt>
　　<dd><!-- コントロールのボックス -->
　　　<input type="file" name="f1" size="40" tabindex="2" accesskey="F">
　　</dd>
・・・・・
　ですから、スタイルシートで
dt[abbr="ファイル選択"]+dd{width:60em;}
　とがでよいはずです。

　もしコントロール自体の幅を指定したいなら、コントロールのスタイルは、CSS的には「ユーザー指定の最重要宣言」扱いですから、著者がどうあがいても指定できないはずです。スタイルシートを解釈しないユーザーエージェント、スタイルシートを停止しているユーザーエージェントなどを考慮すれば、仕様どおり

<input type="file" name="f1" size="40" tabindex="2" accesskey="F">
　　　　　　　　　　　　　　　　　^^^^^^^^^^^^
とseze属性で指定すべきです。

お礼

ありがとございます。

sizeでいけるんですね。