サイト内検索
...スタイルシート(css)...
スタイルシート・フォーム
内側の余白
- 内側の余白は、フォーム（form要素）のinput要素・textarea要素・select要素に
- paddingプロパティを指定します。
- [使い方]
- select{
padding: 20px;
}
- [メモ]
- paddingプロパティについては、こちらをご覧ください。
- textarea要素については、こちらをご覧ください。
- input要素については、こちらをご覧ください。
- select要素については、こちらをご覧ください。
- ＊ＩＥでは、paddingプロパティは、select要素に反映されないようです。
-
他のブラウザ
などで、ご覧ください。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| padding: | ; |
「数値+単位」（例・・100px）を指定します。
単位は、「px」・「em」など、または「%」を指定します。 auto（自動） |
| プロパティ名 | 値
（サンプル） |
説明 |
|---|---|---|
| padding: | 10px; | 上下左右 の指定をします。 |
| padding: | 10px 20px; | 上下・左右 の指定をします。 |
| padding: | 10px 20px 30px; | 上・ 左右・下 の指定をします。 |
| padding: | 10px 20px 30px 40px; | 上・右 ・下・左 の指定をします。 |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
select{
width: 300px;
height: 70px;
padding: 20px;
}
textarea{
width: 300px;
height: 40px;
padding-top: 20px;
padding-left: 40px;
}
input{
padding: 10px 20px;
}
-->
</style>
[ｂｏｄｙの中]
<form method="post" action="sample.html">select
<select name="sample" size="2">
<option value="サンプル-1">サンプル-1</option>
<option value="サンプル-2">サンプル-2</option>
<option value="サンプル-3">サンプル-3</option>
</select>
<input type="submit" value="送信する" />
textarea
<textarea cols="20" rows="2">
サンプル-1
サンプル-2
サンプル-3
</textarea>
<input type="submit" value="送信する" />
[ブラウザ上]
