サイト内検索

...スタイルシート(css)...

スタイルシート・フォーム

サイズ

サイズは、フォーム(form要素)のinput要素・textarea要素・select要素に
横幅は、widthプロパティを指定します。
高さは、heightプロパティを指定します。
[使い方]
select{
width:200px;
height:70px;
}
[メモ]
textarea要素には、cols属性とrows属性の指定が必要です。
textarea要素については、こちらをご覧ください。
input要素については、こちらをご覧ください。
select要素については、こちらをご覧ください。
プロパティ名 説明
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="送信する" />

[ブラウザ上]

select

←サンプル(送信できません。)

textarea

←サンプル(送信できません。)


Copyright c 2007.10.01 luc All rights reserved.