CSS3でセレクトボックスをカスタマイズ

スマホ向けにセレクトボックスをカスタマイズする必要があったのjQuery Mobieなどが利用している方法でデザインをカスタマイズしました。

セレクトボックスはCSSでのカスタマイズはほとんど出来ないので結構トリッキーな方法です。

サンプル

HTMLは次のような感じ。

<select>
	<option>オプションA</option>
	<option>オプションB</option>
	<option>オプションC</option>
	<option>オプションD</option>
	<option>オプションE</option>
</select>
<div>オプションA</div>

select要素以外にカスタマイズ用のdivなどを用意しておきます。そしてdivをCSSでセレクトボックスっぽくカスタマイズ。before擬似要素とかafter擬似要素なんかを駆使すると画象を使わなくてもそれっぽいデザインが作成可能です。

div{
	border:1px solid #7cadb6;
	border-radius: 3px;
	padding:3px 15px 0 3px;
	position: relative;
	font-size: 12px;
	width:100px;
	white-space:nowrap;
	overflow:hidden;
	-webkit-text-overflow:ellipsis;
	text-overflow:ellipsis;
}
div:before{
	content:"";
	display: block;
	width:8px;
	height:10px;
	background : #7cadb6;
	border-radius: 3px;
	padding:3px;
	position: absolute;
	right:3px;
	top:3px;
}
div:after{
	content:"";
	width:0;
	height:0;
	display: block;
	border:4px solid transparent;
	border-top:4px solid white;
	position: absolute;
	right:6px;
	top:9px;
}

つぎにセレクトボックスにも次のCSSを適用させておきます。そうすると透明なセレクトボックスがdivの上に表示されます。

select{
	position: absolute;
	zoom:1.1;
	z-index: 2;
	opacity: 0;
}

ただこれだけではセレクタを変更してもdivのテキストは変わらないので最後はjQueryでセレクタの変更に合わせてテキストの値を変えるようにしておきます。

$(function(){
	$("select").change(function(){
		$("div").text($("option:selected",this).text());
	}).trigger("change");
});

これだけで簡単にオリジナルなセレクトボックスの完成です。

関連エントリー

jQueryを良くする25のTIPS
14のjQueryベストプラクティス
jQuery基礎文法最速マスター
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
display:noneの要素にGoogle Mapsを貼り付ける

スポンサードリンク

«@keyframesとAndroid | メイン | フロントエンドエンジニアを募集中»