サイト内検索
...スタイルシート(css)...
スタイルシート・フォーム
サイズ
- サイズは、フォーム(form要素)のinput要素・textarea要素・select要素に
- 横幅は、widthプロパティを指定します。
- 高さは、heightプロパティを指定します。
- [使い方]
- select{
width:200px;
height:70px;
}
プロパティ名 | 値 | 説明 |
---|---|---|
width: | ; | input要素・textarea要素・select要素の横幅の指定をします。
「数値+単位」(例・・100px)を指定します。 単位は、「px」・「em」など、または「%」を指定します。 |
auto; | 初期値(内容により自動調整) | |
height: | ; |
input要素・textarea要素・select要素の高さの指定します。
「数値+単位」(例・・100px)を指定します。 単位は、「px」・「em」など、または「%」を指定します。 ・・・・・・・ textarea要素(高さが高くなる場合) rowsを「2」以上に指定します。 |
auto; | 初期値(内容により自動調整) |
サンプル
[headの中]
<style type="text/css"><!--
select{
width: 300px;
height: 50px;
}
textarea{
width: 300px;
height: 5em;
}
input.sample1{
width: 150px;
height: 20pt;
}
input.sample2{
width: 150px;
height: 4em;
}
-->
</style>
[bodyの中]
<form method="post" action="sample.cgi">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" class="sample1" value="送信する" />
textarea
<textarea cols="20" rows="2"></textarea>
<input type="submit" class="sample2" value="送信する" />
[ブラウザ上]