selectのデザインをCSSとJavascriptでカスタマイズ

jQuery mobile などの大規模なプラグインを導入せずに
オリジナルデザインのセレクトボックスを設置するためのjQuery+CSSのソースをご紹介します。

動作サンプルはこちら。

フォーム要素の初期装飾をリセットできるCSS3のappearanceは、IE8以下でつかうことができませんが
このやり方なら、外形の装飾はIE6から最新のブラウザまで同じようにデザインを変えられます。
ただ、スマートフォン対応をがメインのため、展開したときのoption部分はデフォルトのままです。

実際のソース

大雑把に解説すると、本物のセレクトボックスは透明にしてクリック判定のためだけに配置しておいて
装飾部分は.innerのdivで代替しています。
javascriptでは、セレクトボックスで選択された値(選択された項目の表示文字列)を取得して
.innerの要素に表示させています。

<div class="custom-selectbox">
	<div class="inner"><span></span></div>
	<select name="month">
		<option value="" selected="selected">--</option>
		<option value="1">January</option>
		<option value="2">February</option>
		<option value="3">March</option>
		<option value="4">April</option>
		<option value="5">May</option>
		<option value="6">June</option>
		<option value="7">July</option>
		<option value="8">August</option>
		<option value="9">September</option>
		<option value="10">October</option>
		<option value="11">November</option>
		<option value="12">December</option>
	</select>
</div>

 

.custom-selectbox {
	position: relative;
}
	.custom-selectbox select {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 240px;
		height: 36px;
		opacity: 0;
	}
	.custom-selectbox .inner {
		position: relative;
		z-index: 0;
		box-sizing: border-box;
		border: 1px solid #000;
		padding: 0 12px;
		width: 240px;
		height: 36px;
		font-size: 14px;
		line-height: 36px;
	}
	.custom-selectbox .inner:before,
	.custom-selectbox .inner:after {
		content: '';
		position: absolute;
		display: block;
	}
	.custom-selectbox .inner:before {
		top: 0;
		right: 0;
		bottom: 0;
		width: 24px;
		background: #000;
	}
	.custom-selectbox .inner:after {
		top: 50%;
		right: 7px;
		margin-top: -3px;
		width: 0;
		height: 0;
		border: solid transparent;
		border-top-color: #fff;
		border-width: 5px 5px 0 5px;
	}
custom_selectbox = function(select, obj){
	var set_selectbox = function(){
		var value = jQuery(this).find('option:selected').html();
		jQuery(select).find(obj).find('span').html(value);
	}
	jQuery(select).find('select').each(set_selectbox).on('change', set_selectbox);
}

jQuery(function(){
	custom_selectbox('.custom-selectbox', '.inner');
});

この仕組は、この前おぼえたAdobeのEdge InspectでjQuery mobileのデモを解析し
それを大々的に参考にして簡略化したものです。
独自のアイデアではないので、たいへん恐縮です。
jQuery mobile開発者の皆様、勉強になりました。ありがとうございます!

関連記事

Pocket