特定の<input type="***" />にスタイルを付ける
ボタン、テキストボックス
サンプルソース
<html>
<head>
<title>inputタグのtype属性にスタイルを指定</title>
<style type="text/css">
<!--
input[type="button"]{ /*汎用ボタン*/
color : white; /*文字色*/
background-color :navy; /*背景色*/
}
input[type="reset"]{/*リセットボタン*/
color : blue;
background-color :pink;
}
input[type="text"]{/*一行テキスト入力欄*/
color : red;
background-color : #e2ffe4;
}
-->
</style>
</head>
<body>
<form>
<input type="button" value="プッシュボタン" />
<input type="reset" value="リセットボタン" />
<input type="text" value="テキストボックス" />
<input type="text" value="" />
</form>
</body>
</html>
input[type="属性値"]{スタイル指定｝
type="button" とすればプッシュボタンのスタイルを
設定することができます。以下 type属性の値にreset、text を
入れて、リセットボタン,テキストボックスのスタイルを変えています。input要素の typeの属性値
| 値 | 作成される入力フォーム | 入力フォーム |
|---|---|---|
| text | 一行テキスト入力欄 | |
| passward | パスワード入力欄 | |
| checkbox | チェックボックス | ：チェック１：チェック２ |
| radio | ラジオボタン | ：ラジオ１ ：ラジオ２ |
| button | 汎用ボタン | |
| reset | リセットボタン | |
| submit | 送信ボタン | |
| file | ファイル選択 | |
| hidden | 隠しデータ | 表示されません |
| image | 画像送信ボタン |
テキストボックス
ボタン
スタイルシート CSS
無料ホームページサービス「デジデジ」
お手軽価格で使いがい、あります。
月額250円〜で、容量5GB、独自ドメイン、CGI使用、商用利用可能！
FC2レンタルサーバーLite
