size属性

select要素のsize属性は、同時に表示する選択肢の数を指定する属性。

ブラウザ対応

構文

<select size="同時表示選択肢数"></select>

size属性には、同時に表示する選択肢の数を指定する。

サンプルコード

<select size="3">
	<option value="値Ａ">選択肢Ａ</option>
	<option value="値Ｂ">選択肢Ｂ</option>
	<option value="値Ｃ">選択肢Ｃ</option>
	<option value="値Ｄ">選択肢Ｄ</option>
	<option value="値Ｅ">選択肢Ｅ</option>
</select>

size属性に3を指定すると、選択肢を３つ同時に表示する。

サンプル

１つだけ選択

HTMLソースコード
<p>
	size属性なし： 
	<select name="sampleName" style="vertical-align: middle;">
		<option>選択肢Ａ</option>
		<option>選択肢Ｂ</option>
		<option>選択肢Ｃ</option>
		<option>選択肢Ｄ</option>
		<option>選択肢Ｅ</option>
		<option>選択肢Ｆ</option>
		<option>選択肢Ｇ</option>
	</select>
</p>
<p>
	size="3"： 
	<select name="sampleName" size="3" style="vertical-align: middle;">
		<option>選択肢Ａ</option>
		<option>選択肢Ｂ</option>
		<option>選択肢Ｃ</option>
		<option>選択肢Ｄ</option>
		<option>選択肢Ｅ</option>
		<option>選択肢Ｆ</option>
		<option>選択肢Ｇ</option>
	</select>
</p>
<p>
	size="7"： 
	<select name="sampleName" size="7" style="vertical-align: middle;">
		<option>選択肢Ａ</option>
		<option>選択肢Ｂ</option>
		<option>選択肢Ｃ</option>
		<option>選択肢Ｄ</option>
		<option>選択肢Ｅ</option>
		<option>選択肢Ｆ</option>
		<option>選択肢Ｇ</option>
	</select>
</p>
実際の表示

size属性なし：

size="3"：

size="7"：

複数選択可

HTMLソースコード
<p>
	size属性なし： 
	<select multiple name="sampleName" style="vertical-align: middle;">
		<option>選択肢Ａ</option>
		<option>選択肢Ｂ</option>
		<option>選択肢Ｃ</option>
		<option>選択肢Ｄ</option>
		<option>選択肢Ｅ</option>
		<option>選択肢Ｆ</option>
		<option>選択肢Ｇ</option>
	</select>
</p>
<p>
	size="3"： 
	<select multiple name="sampleName" size="3" style="vertical-align: middle;">
		<option>選択肢Ａ</option>
		<option>選択肢Ｂ</option>
		<option>選択肢Ｃ</option>
		<option>選択肢Ｄ</option>
		<option>選択肢Ｅ</option>
		<option>選択肢Ｆ</option>
		<option>選択肢Ｇ</option>
	</select>
</p>
<p>
	size="7"： 
	<select multiple name="sampleName" size="7" style="vertical-align: middle;">
		<option>選択肢Ａ</option>
		<option>選択肢Ｂ</option>
		<option>選択肢Ｃ</option>
		<option>選択肢Ｄ</option>
		<option>選択肢Ｅ</option>
		<option>選択肢Ｆ</option>
		<option>選択肢Ｇ</option>
	</select>
</p>
実際の表示

size属性なし：

size="3"：

size="7"：