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

以下の実装状況一覧表で、 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 はこのプロパティに対応していません。

このモジュール内の文書

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

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