エレメントで<input type="text">のみスタイルを変える |
Internet Explorer | Netscape Navigator | Opera | iCab | Safari | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
3.0x | 4.0x | 4.5 | 5.0x | 5.5 | 6.0 | 2.0x | 3.0x | 4.0x | 4.x | 6.0 | 7.0 | 7.x | 2.x | 1.x | |
Windows | × | × | - | × | × | × | × | × | × | × | ○ | ○ | × | - | - |
Macintosh | × | × | × | × | - | - | × | × | × | × | ○ | ○ | × | × | × |
UNIX | - | - | - | - | - | - | × | × | × | × | ○ | ○ | × | - | - |
ポイント | input[type="text"] { スタイル指定 }; |
---|---|
説 明 | フォームのエレメントは<input>タグで指定します。しかし、<input>タグで指定できるエレメントは数多くあります。その中で特定の種類のエレメントのみにスタイルを適用するにはinput[type="エレメントの種類"]とします。あとは通常のスタイルを設定します。 |
サンプル | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"><title>Sample</title> <style type="text/css"><!-- input { color: red; } input[type="text"] { color: orange; } --></style> </head> <body> <form> <input type="text" value="Sample"><br> <input type="button" value="Sample"><br> </form> </body> </html> |
補足説明 | SafariではMacOS Xの都合上ボタンなどのフォーム部品の色を変更することができないためスタイルを指定しても反映されません。 |
■サンプルを実行する >>実行 ■各ブラウザでの動作結果を見る >>View! |