フォームコントロール向けの CSS プロパティの互換性一覧表

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

表の見方

値

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

✅ Yes

プロパティは各ブラウザー間で、一貫してほどよく対応されています。もっとも、特殊なケースでは奇妙な副作用に直面するかもしれません。

⚠️ Partial

プロパティは動作しますが、たびたび奇妙な副作用や一貫性のなさに直面するかもしれません。まず副作用について熟知しているのでなければ、これらのプロパティは避けるべきでしょう。

❌ No

プロパティは動作しない、または頼りにできるほどの一貫性がありません。

n.a.

当該ウィジェットに対して、そのプロパティは意味がありません。

レンダリング

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

N (Normal)

プロパティをそのまま適用することを表します。

T (Tweaked)

下記の追加ルールとともにプロパティを適用することを表します:

css

* {
/* これは、WebKit ベースのブラウザーでネイティブのルックアンドフィールを無効にします */
  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, 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> 要素の下矢印を変更する方法はありません。.

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

<select>、<optgroup>、<option> の各要素とsize 属性を参照してください。

プロパティ 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 はこのプロパティに対応していません。

関連情報

学習経路

高度なトピック