2009-05-30 14 views
1

私が理解しているように、width/padding/marginプロパティはブロックレベルの要素に対してのみ機能します。しかし、INPUTとSELECT要素では、幅を指定することができます。これは動作します。すべき?INPUTとSELECT要素のカスタムサイズ

私はこのような何か書くことができます:

<input type="text" style="display:block;" /> 

をしかし、それは必要なのか?

誰でも理由を説明してください。

答えて

4

実際にはインライン要素ではなく、インラインブロック要素です。これにより、インライン要素の流れを壊すことなく、幅、高さ、および他のブロック固有のプロパティを指定することができます。 In good browsersあなたは同じことを達成するためにどの要素でも "display:inline-block"を使うことができます。

+0

これは広範なテストではありませんが、少なくともFirefox 3では入力要素の計算されたスタイル(それを変更する著者スタイリングなし)はdisplay:inline - inline-blockではありません。 – Quentin

+0

@David、はい、あなたは正しいですが、Mozillaが内部的に "display:-moz-inline-box"を使用すると仮定しています(私は何の証拠も見つけられませんでした)。私もいくつかのテストを行っており、IE8とChrome2はSELECT要素の "インラインブロック"を報告し、Opera9は "インライン"を報告しているようです。あなたの答えは正しいと思いますが、そのような要素に対しては "display:inline-block"とするのはかなり安全です。 –

-1

それができない場合はどうなりましたか? INPUT要素が導入されたときにCSSはありませんでした。そして、適切なフォームを作成するために、HTMLではINPUT要素の幅が絶対に必要です。

+0

私は見ています...最近、それを行う適切な方法は何ですか? display:blockを指定するか、これらの要素を歴史的な例外として見なしますか? – User

+0

表示:何らかの理由でブロックが必要な場合にのみ使用してください。 – Thinker

0

は技術的には、それはブラウザ固有である演色性です。この時点では、ほとんどのブラウザで幅を設定できますが、特に古いブラウザでは保証されません。また、の場合はでバグが発生する可能性があります。

入力要素のW3仕様は、技術的にそれをインライン要素にします。インラインブロックはW3仕様の一部でもなく、CSS2の一部です(古いブラウザでは一貫性がありません)。

たとえば、幅をパーセントで指定し、テキストを大量に入れると面白いバグがあります。

長いストーリーは、ほとんど常に安全です。私が見た公式仕様の一部ではありません。

4

The spec says

は適用:例えば入力として全ての要素が、非置換インライン要素、テーブルの行と行グループ

フォームコントロール、及び選択要素はインラインで置換されています(要素はフォームコントロールに置き換えられます。テキストコンテンツは通常の要素のように表示されません)。

これらは置き換えられるため、置き換えられないため、widthプロパティが適用されます。