文書更新：2017年09月13日(水) 午前10時10分54秒

Home > 備忘録 > Web page 作成 > リストボックス( 56 )

リストボックスの選択時の色指定

  1. HTML
    2. <div id="demo1">
	<form>
		<p>旅行に行ってみたい都道府県を次の中からお選びください</p>
		<select class="jisaku1" name="pref">
			<option value="1" selected>長崎県</option>
			<option value="2">岩手県</option>
			<option value="3">京都府</option>
			<option value="4">神奈川県</option>
			<option value="5">石川県</option>
			<option value="6">高知県</option>
		</select>
	</form>
</div>
  2. スタイルシート
    3. #demo1{
	margin-left : 1em;
}
select.jisaku1{
	margin-left : 1em;
	font-size : 1em;
	height : 1.5em;
	color : blue;		/* 選択した項目の色指定 */
}
select.jisaku1 option:not(:checked){		/* 非選択項目の色指定( checked じゃないとだめです) */ 
     color : green;
}
  3. 実行結果

    4. 旅行に行ってみたい都道府県を次の中からお選びください

リストボックスの未選択と選択時の色分け

  1. HTML
    2. <div id="demo2">
	<form>
		<p>旅行に行ってみたい都道府県は？</p>
		<select class="jisaku2" name="pref" onchange="change2(this);">	<!-- リストボックスの値が変更されたとき関数 change2(this) を実行する -->
			<option value="0" selected>未選択</option>
			<option value="1">山形県</option>
			<option value="2">岡山県</option>
			<option value="3">長野県</option>
			<option value="4">広島県</option>
			<option value="5">佐賀県</option>
		</select>
	</form>
</div>
  2. スタイルシート
    3. #demo2{
	margin-left : 1em;
}
select.jisaku2{
	font-size : 1em;
	height : 1.5em;
	margin-left : 1em;
	color : red;		/* 作成時の色指定 */
}
select.jisaku2 option[value="0"]{	/* 色指定(valueの値が0) */
	color : red;
}
select.jisaku2 option:not([value="0"]){	/* 色指定(valueの値が0以外) */
	color : blue;
}
  3. javascript
    4. function change2( aa ){
	if( aa.value == 0 ){
		aa.style.color = "red";		/* 色指定(valueの値が0) */
	}else{
		aa.style.color = "blue";	/* 色指定(valueの値が0以外) */
	}
}
  4. 実行結果

    5. 旅行に行ってみたい都道府県は？