フォームコントロール向けの CSS プロパティの互換性一覧表
以下の実装状況一覧表で、 HTML フォーム向けの CSS の対応状況を要約しています。 HTML フォームや CSS の複雑さにより、これらの表は完全なリファレンスであるとはいえません。それでも、何ができて何ができないかの見識を得られるでしょう。また、どうすればよいかを知る助けにもなるでしょう。
表の見方
値
それぞれのプロパティで取り得る値は 4 種類あります。
- ✅ Yes
-
プロパティは各ブラウザー間で、一貫してほどよく対応されています。もっとも、特殊なケースでは奇妙な副作用に直面するかもしれません。
- ⚠️ Partial
-
プロパティは動作しますが、たびたび奇妙な副作用や一貫性のなさに直面するかもしれません。まず副作用について熟知しているのでなければ、これらのプロパティは避けるべきでしょう。
- ❌ No
-
プロパティは動作しない、または頼りにできるほどの一貫性がありません。
- n.a.
-
当該ウィジェットに対して、そのプロパティは意味がありません。
レンダリング
それぞれのプロパティで可能なレンダリング方法は 2 種類あります:
- N (Normal)
-
プロパティをそのまま適用することを表します。
- T (Tweaked)
-
下記の追加ルールとともにプロパティを適用することを表します:
* {
/* これは、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 |
|
border |
⚠️ Partial[1][2] | ✅ Yes |
|
margin |
✅ Yes | ✅ Yes | |
padding |
⚠️ Partial[1][2] | ✅ Yes |
|
テキストとフォント | |||
color [1] |
✅ Yes | ✅ Yes |
|
font |
✅ Yes | ✅ Yes | line-height の注意事項をご覧ください。 |
letter-spacing |
✅ Yes | ✅ Yes | |
text-align |
✅ Yes | ✅ Yes | |
text-decoration |
⚠️ Partial | ⚠️ Partial | Opera に関する注意事項をご覧ください。 |
text-indent |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
text-overflow |
⚠️ Partial | ⚠️ Partial | |
text-shadow |
⚠️ Partial | ⚠️ Partial | |
text-transform |
✅ Yes | ✅ Yes | |
境界と背景 | |||
background |
⚠️ Partial[1] | ✅ Yes |
|
border-radius |
⚠️ Partial[1][2] | ✅ Yes |
|
box-shadow |
❌ No | ⚠️ Partial[1] |
|
ボタン
button
, submit
, and reset
input types and the
要素を見てください。<button>
プロパティ | N | T | 備考 |
---|---|---|---|
CSS ボックスモデル | |||
width |
✅ Yes | ✅ Yes | |
height |
⚠️ Partial[1] | ✅ Yes |
|
border |
⚠️ Partial | ✅ Yes | |
margin |
✅ Yes | ✅ Yes | |
padding |
⚠️ Partial[1] | ✅ Yes |
|
テキストとフォント | |||
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] |
|
box-shadow |
❌ No | ⚠️ Partial[1] |
|
数値
number
入力タイプを見てください。フィールドの値の変更に使用するスピンボタンのスタイルを変更するための、標準的な方法はありません。Safari では、スピンボタンがフィールドの外部にあることは知っておくべきです。
プロパティ | N | T | 備考 |
---|---|---|---|
CSS ボックスモデル | |||
width |
✅ Yes | ✅ Yes | |
height |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
border |
✅ Yes | ✅ Yes | |
margin |
✅ Yes | ✅ Yes | |
padding |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
テキストとフォント | |||
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] |
|
height |
❌ No[1] | ❌ No[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] |
|
height |
❌ No | ✅ Yes | |
border |
⚠️ Partial | ✅ Yes | |
margin |
✅ Yes | ✅ Yes | |
padding |
❌ No[1] | ⚠️ Partial[2] |
|
テキストとフォント | |||
color |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
font |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
letter-spacing |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
text-align |
❌ No[1] | ❌ No[1] |
|
text-decoration |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
text-indent |
⚠️ Partial[1][2] | ⚠️ Partial[1][2] |
|
text-overflow |
❌ No | ❌ No | |
text-shadow |
⚠️ Partial[1][2] | ⚠️ Partial[1][2] |
|
text-transform |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
境界と背景 | |||
background |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
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] |
|
テキストとフォント | |||
color |
✅ Yes | ✅ Yes | |
font |
✅ Yes | ✅ Yes | line-height の注意事項をご覧ください。 |
letter-spacing |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
text-align |
❌ No[1] | ❌ No[1] |
|
text-decoration |
❌ No[1] | ❌ No[1] |
|
text-indent |
❌ No | ❌ No | |
text-overflow |
❌ No | ❌ No | |
text-shadow |
❌ No | ❌ No | |
text-transform |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
境界と背景 | |||
background |
✅ Yes | ✅ Yes | |
border-radius |
✅ Yes[1] | ✅ Yes[1] |
|
box-shadow |
❌ No | ⚠️ Partial[1] |
|
Datalist
and <datalist>
要素と <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] |
|
letter-spacing |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
text-align |
❌ No | ❌ No | |
text-decoration |
❌ No | ❌ No | |
text-indent |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
text-overflow |
❌ No | ❌ No | |
text-shadow |
❌ No | ❌ No | |
text-transform |
❌ No | ❌ No | |
境界と背景 | |||
background |
❌ No[1] | ❌ No[1] |
|
border-radius |
❌ No | ❌ No | |
box-shadow |
❌ No | ⚠️ Partial[1] |
|
日付選択
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 |
|
border |
✅ Yes | ✅ Yes | |
margin |
✅ Yes | ✅ Yes | |
padding |
❌ No[1] | ✅ 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 |
❌ No[1] | ❌ No[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] |
|
テキストとフォント | |||
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] |
|
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] |
|
border |
❌ No | ✅ Yes | |
margin |
✅ Yes | ✅ Yes | |
padding |
⚠️ Partial[1] | ✅ 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 |
❌ No[1] | ❌ No[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] |
|
box-shadow |
⚠️ Partial[1] | ⚠️ Partial[1] |
|