Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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

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

表の見方

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

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

レンダリング

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

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

/* これは、Gecko ベースのブラウザでネイティブのルックアンドフィールを無効にします */
  -moz-appearance: none;

/* これは Opera、Internet Explorer、Firefox など、その他いくつかのブラウザでネイティブの 
   ルックアンドフィールを無効にします */
  background: none;
}

実装状況一覧表

全体的な動作

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

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

テキストフィールド

プロパティ 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 はこのプロパティをサポートしません。

ボタン

プロパティ 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

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

プロパティ 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  

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

Firefox では <select> 要素の下向き矢印ボタンを変更する方法がありません。

プロパティ 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]

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

プロパティ 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

プロパティ 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  

ファイルピッカー

プロパティ 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 はこのプロパティをサポートしません。

日付選択

多くのプロパティがサポートされていますが、ブラウザ間で頼りにできるほどの一貫性はありません。

プロパティ 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  

カラーピッカー

現状では、動作を当てにできるほど十分な実装はされていません。

プロパティ 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]

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

現状では、動作を当てにできるほど十分な実装はされていません。

プロパティ 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

スライダーのつまみのスタイルを変更するための標準的な方法はなく、また 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]

画像ボタン

プロパティ 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 はこのプロパティをサポートしません。

 

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,