フォームウィジェット向けプロパティ実装状況一覧

以下の実装状況一覧表で、 HTML フォーム向けの CSS の対応状況を要約しています。 HTML フォームや CSS の複雑さにより、これらの表は完全なリファレンスであるとはいえません。それでも、何ができて何ができないかの見識を得られるでしょう。また、どうすればよいかを知る助けにもなるでしょう。

表の見方

値

それぞれのプロパティで取り得る値は 4 種類あります。

Yes
プロパティは各ブラウザー間で、一貫してほどよく対応されています。もっとも、特殊なケースでは奇妙な副作用に直面するかもしれません。
Partial
プロパティは動作しますが、たびたび奇妙な副作用や一貫性のなさに直面するかもしれません。まず副作用について熟知しているのでなければ、これらのプロパティは避けるべきでしょう。
No
プロパティは動作しない、または頼りにできるほどの一貫性がありません。
n.a.
当該ウィジェットに対して、そのプロパティは意味がありません。

レンダリング

それぞれのプロパティで可能なレンダリング方法は 2 種類あります:

N (Normal)
プロパティをそのまま適用することを表します。
T (Tweaked)
下記の追加ルールとともにプロパティを適用することを表します:
* {
/* これは、WebKit ベースのブラウザーでネイティブのルックアンドフィールを無効にします */
  -webkit-appearance: none;
  appearance: none; 

/* Internet Explorer用 */
  background: none;
}

実装状況一覧表

全体的な動作

全体的なレベルで多くのブラウザーに共通する動作があります:

border, background, border-radius, height
これらのプロパティのいずれかを使用すると、一部のブラウザーでネイティブのルックアンドフィールが部分的に、あるいは全面的に無効になることがあります。これらを使用する際は注意してください。
line-height
このプロパティの対応状況は各ブラウザー間で一貫性がありませんので、避けるべきでしょう。
text-decoration
このプロパティはフォームウィジェットにおいて Opera が対応していません。
text-overflow
Opera、Safari および IE9 ではフォームウィジェットでこのプロパティに対応していません。
text-shadow
Opera は text-shadow をフォームウィジェットで対応していません。また、IE9 はまったく対応していません。

テキストフィールド

text, search, and password の入力タイプを見てください。

プロパティ N T 備考
CSS ボックスモデル
width Yes Yes
height Partial[1][2] Yes
  1. WebKit ブラウザーは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、-webkit-appearance:none を使用することが必要です。
  2. Windows 7 で Internet Explorer 9 は、 background:none が適用されなければ境界を適用しません。
border Partial[1][2] Yes
  1. WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、-webkit-appearance:none を使用することが必要です。
  2. Windows 7 で Internet Explorer 9 は、background:none が適用されなければ境界を適用しません。
margin Yes Yes
padding Partial[1][2] Yes
  1. WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、-webkit-appearance:none を使用することが必要です。
  2. Windows 7 で Internet Explorer 9 は、background:none が適用されなければ境界を適用しません。
テキストとフォント
color[1] Yes Yes
  1. border-color プロパティが設定されていない場合、一部の WebKit ベースブラウザは <textarea> において、フォントだけでなく境界にも color プロパティを適用します。
font Yes Yes line-height の注意事項をご覧ください。
letter-spacing Yes Yes
text-align Yes Yes
text-decoration Partial Partial Opera に関する注意事項をご覧ください。
text-indent Partial[1] Partial[1]
  1. IE9 はこのプロパティを <textarea> のみで、Opera は単一行のテキストフィールドのみで対応しています。
text-overflow Partial Partial
text-shadow Partial Partial
text-transform Yes Yes
境界と背景
background Partial[1] Yes
  1. WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、-webkit-appearance:none を使用することが必要です。Windows 7 で Internet Explorer 9 は、background:none が適用されなければ境界を適用しません。
border-radius Partial[1][2] Yes
  1. WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、-webkit-appearance:none を使用することが必要です。Windows 7 で Internet Explorer 9 は、background:none が適用されなければ境界を適用しません。
  2. Opera では、明示的に境界が設定されている場合にのみ border-radius が適用されます。
box-shadow No Partial[1]
  1. IE9 はこのプロパティに対応していません。

ボタン

button,  submit, and reset input types and the <button> 要素を見てください。

プロパティ N T 備考
CSS ボックスモデル
width Yes Yes
height Partial[1] Yes
  1. Mac OSX や iOS では、WebKit ベースブラウザでこのプロパティが適用されません。
border Partial Yes
margin Yes Yes
padding Partial[1] Yes
  1. Mac OSX や iOS では、WebKit ベースブラウザでこのプロパティが適用されません。
テキストとフォント
color Yes Yes
font Yes Yes line-height の注意事項をご覧ください。
letter-spacing Yes Yes
text-align No No
text-decoration Partial Yes
text-indent Yes Yes
text-overflow No No
text-shadow Partial Partial
text-transform Yes Yes
境界と背景
background Yes Yes
border-radius Yes[1] Yes[1]
  1. Opera では、明示的に境界が設定されている場合にのみ border-radius が適用されます。
box-shadow No Partial[1]
  1. IE9 はこのプロパティに対応していません。

数値

 number 入力タイプを見てください。フィールドの値の変更に使用するスピンボタンのスタイルを変更するための、標準的な方法はありません。Safari では、スピンボタンがフィールドの外部にあることは知っておくべきです。

プロパティ N T 備考
CSS ボックスモデル
width Yes Yes
height Partial[1] Partial[1]
  1. Opera ではスピンボタンが拡大されて、フィールドの内容物を隠す場合があります。
border Yes Yes
margin Yes Yes
padding Partial[1] Partial[1]
  1. Opera ではスピンボタンが拡大されて、フィールドの内容物を隠す場合があります。
テキストとフォント
color Yes Yes
font Yes Yes line-height の注意事項をご覧ください。
letter-spacing Yes Yes
text-align Yes Yes
text-decoration Partial Partial
text-indent Yes Yes
text-overflow No No
text-shadow Partial Partial
text-transform N.A. N.A.
境界と背景
background No No

対応していますが、ブラウザ間で頼りにできるほどの一貫性はありません。
border-radius No No
box-shadow No No

チェックボックスとラジオボタン

checkbox と radio 入力タイプを見てください。

プロパティ N T 備考
CSS ボックスモデル
width No[1] No[1]
  1. 一部のブラウザでは、マージンを追加したりウィジェットを引き伸ばしたりします。
height No[1] No[1]
  1. 一部のブラウザでは、マージンを追加したりウィジェットを引き伸ばしたりします。
border No No
margin Yes Yes
padding No No
テキストとフォント
color N.A. N.A.
font N.A. N.A.
letter-spacing N.A. N.A.
text-align N.A. N.A.
text-decoration N.A. N.A.
text-indent N.A. N.A.
text-overflow N.A. N.A.
text-shadow N.A. N.A.
text-transform N.A. N.A.
境界と背景
background No No
border-radius No No
box-shadow No No

セレクトボックス (単一行)

<select>、 <optgroup>、<option> 要素を見てください。

プロパティ N T 備考
CSS ボックスモデル
width Partial[1] Partial[1]
  1. このプロパティは <select> 要素では問題ありませんが、 <option> 要素や <optgroup> 要素では効果がありません。
height No Yes
border Partial Yes
margin Yes Yes
padding No[1] Partial[2]
  1. プロパティは適用されますが、Mac OSX ではブラウザ間の一貫性がありません。
  2. このプロパティは <select> 要素には適用されますが、 <option> 要素や <optgroup> 要素では処理に一貫性がありません。
テキストとフォント
color Partial[1] Partial[1]
  1. Mac OSX では、WebKit ベースのブラウザがネイティブウィジェットでこのプロパティに対応せず、また <option> 要素や <optgroup> 要素では Opera を含めてまったく対応していません。
font Partial[1] Partial[1]
  1. Mac OSX では、WebKit ベースのブラウザがネイティブウィジェットでこのプロパティに対応せず、また <option> 要素や <optgroup> 要素では Opera を含めてまったく対応していません。
letter-spacing Partial[1] Partial[1]
  1. IE9 は <select>、 <option> および <optgroup> 要素でこのプロパティに対応していません。Mac OSX で WebKit ベースのブラウザは、 <option> 要素や <optgroup> 要素でこのプロパティに対応していません。
text-align No[1] No[1]
  1. Windows 7 で IE9 および Mac OSX で WebKit ベースのブラウザは、このウィジェットで本プロパティに対応していません。
text-decoration Partial[1] Partial[1]
  1. Firefox のみがこのプロパティを完全対応しています。 Opera はこのプロパティに全く対応しておらず、また他のブラウザは <select> 要素のみに対応しています。
text-indent Partial[1][2] Partial[1][2]
  1. ほとんどのブラウザは、<select> 要素のみでこのプロパティに対応しています。
  2. IE9 はこのプロパティに対応していません。
text-overflow No No
text-shadow Partial[1][2] Partial[1][2]
  1. ほとんどのブラウザは、<select> 要素のみでこのプロパティに対応しています。
  2. IE9 はこのプロパティに対応していません。
text-transform Partial[1] Partial[1]
  1. ほとんどのブラウザは、<select>要素のみでこのプロパティに対応しています。
境界と背景
background Partial[1] Partial[1]
  1. ほとんどのブラウザは、<select>要素のみでこのプロパティに対応しています。
border-radius Partial[1] Partial[1]
box-shadow No Partial[1]

Firefox では<select> 要素の下矢印を変更する方法はありません。.

セレクトボックス (複数行)

プロパティ N T 備考
CSS ボックスモデル
width Yes Yes
height Yes Yes
border Yes Yes
margin Yes Yes
padding Partial[1] Partial[1]
  1. Opera は padding-top および padding-bottom に <select> 要素で対応していません。
テキストとフォント
color Yes Yes
font Yes Yes line-height の注意事項をご覧ください。
letter-spacing Partial[1] Partial[1]
  1. IE9 は <select> 、 <option> および <optgroup> 要素でこのプロパティに対応していません。Mac OSX で WebKit ベースのブラウザは、 <option> 要素や <optgroup> 要素でこのプロパティに対応していません。
text-align No[1] No[1]
  1. Windows 7 で IE9 および Mac OSX で WebKit ベースのブラウザは、このウィジェットで本プロパティに対応していません。
text-decoration No[1] No[1]
  1. Firefox および IE9 以上のみが対応しています。
text-indent No No
text-overflow No No
text-shadow No No
text-transform Partial[1] Partial[1]
  1. ほとんどのブラウザは、 <select> 要素のみでこのプロパティに対応します。
境界と背景
background Yes Yes
border-radius Yes[1] Yes[1]
  1. Opera では、明示的に境界が設定されている場合にのみ border-radius が適用されます。
box-shadow No Partial[1]
  1. IE9 はこのプロパティに対応していません。

Datalist

  <datalist> and <input> 要素と list 属性を見てください。

プロパティ N T 備考
CSS ボックスモデル
width No No
height No No
border No No
margin No No
padding No No
テキストとフォント
color No No
font No No
letter-spacing No No
text-align No No
text-decoration No No
text-indent No No
text-overflow No No
text-shadow No No
text-transform No No
境界と背景
background No No
border-radius No No
box-shadow No No

ファイルピッカー

  file 入力タイプを見てください。

プロパティ N T 備考
CSS ボックスモデル
width No No
height No No
border No No
margin Yes Yes
padding No No
テキストとフォント
color Yes Yes
font No[1] No[1]
  1. 対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。
letter-spacing Partial[1] Partial[1]
  1. ほとんどのブラウザは、このプロパティを選択ボタンにも適用します。
text-align No No
text-decoration No No
text-indent Partial[1] Partial[1]
  1. ウィジェットの外側に左マージンがあるような状態になります。
text-overflow No No
text-shadow No No
text-transform No No
境界と背景
background No[1] No[1]
  1. 対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。
border-radius No No
box-shadow No Partial[1]
  1. IE9 はこのプロパティに対応していません。

日付選択

date と time 入力タイプを見てください。多くのプロパティが対応されていますが、ブラウザー間で頼りにできるほどの一貫性はありません。

プロパティ N T 備考
CSS ボックスモデル
width No No
height No No
border No No
margin Yes Yes
padding No No
テキストとフォント
color No No
font No No
letter-spacing No No
text-align No No
text-decoration No No
text-indent No No
text-overflow No No
text-shadow No No
text-transform No No
境界と背景
background No No
border-radius No No
box-shadow No No

カラーピッカー

 color 入力タイプを見てください。

プロパティ N T 備考
CSS ボックスモデル
width Yes Yes
height No[1] Yes
  1. Opera はこのプロパティを、select ウィジェットと同じ制限事項のもとに処理します。
border Yes Yes
margin Yes Yes
padding No[1] Yes
  1. Opera はこのプロパティを、select ウィジェットと同じ制限事項のもとに処理します。
テキストとフォント
color N.A. N.A.
font N.A. N.A.
letter-spacing N.A. N.A.
text-align N.A. N.A.
text-decoration N.A. N.A.
text-indent N.A. N.A.
text-overflow N.A. N.A.
text-shadow N.A. N.A.
text-transform N.A. N.A.
境界と背景
background No[1] No[1]
  1. 対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。
border-radius No[1] No[1]
box-shadow No[1] No[1]

メーターとプログレスバー

<meter> と <progress> 要素を見てください:

プロパティ N T 備考
CSS ボックスモデル
width Yes Yes
height Yes Yes
border Partial Yes
margin Yes Yes
padding Yes Partial[1]
  1. Chrome は調整された (Tweaked) 状態の要素に padding プロパティが適用されていると、<progress> 要素や <meter> 要素を隠します。
テキストとフォント
color N.A. N.A.
font N.A. N.A.
letter-spacing N.A. N.A.
text-align N.A. N.A.
text-decoration N.A. N.A.
text-indent N.A. N.A.
text-overflow N.A. N.A.
text-shadow N.A. N.A.
text-transform N.A. N.A.
境界と背景
background No[1] No[1]
  1. 対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。
border-radius No[1] No[1]
box-shadow No[1] No[1]

Range

range 入力タイプを見てください。スライダーのつまみのスタイルを変更するための標準的な方法はなく、また Opera ではウィジェットのデフォルトの表示を調整する方法がありません。

プロパティ N T 備考
CSS ボックスモデル
width Yes Yes
height Partial[1] Partial[1]
  1. Chrome や Opera はウィジェットの周りに余白を追加します。また Windows 7 の Opera では、スライダーのつまみが引き伸ばされます。
border No Yes
margin Yes Yes
padding Partial[1] Yes
  1. padding は適用されますが、視覚的な効果はありません。
テキストとフォント
color N.A. N.A.
font N.A. N.A.
letter-spacing N.A. N.A.
text-align N.A. N.A.
text-decoration N.A. N.A.
text-indent N.A. N.A.
text-overflow N.A. N.A.
text-shadow N.A. N.A.
text-transform N.A. N.A.
境界と背景
background No[1] No[1]
  1. 対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。
border-radius No[1] No[1]
box-shadow No[1] No[1]

画像ボタン

image 入力タイプを見てください:

プロパティ N T 備考
CSS ボックスモデル
width Yes Yes
height Yes Yes
border Yes Yes
margin Yes Yes
padding Yes Yes
テキストとフォント
color N.A. N.A.
font N.A. N.A.
letter-spacing N.A. N.A.
text-align N.A. N.A.
text-decoration N.A. N.A.
text-indent N.A. N.A.
text-overflow N.A. N.A.
text-shadow N.A. N.A.
text-transform N.A. N.A.
境界と背景
background Yes Yes
border-radius Partial[1] Partial[1]
  1. IE9 はこのプロパティに対応していません。
box-shadow Partial[1] Partial[1]
  1. IE9 はこのプロパティに対応していません。
前のページ Overview: Forms

このモジュール

学習コース

上級トピック