この記事は公開から8年、最終更新日からも7年経過しています。内容が古くなっている可能性があります。

概要

select要素をクライアント指定のデザインに変更する機会があり、
ほほう〜と思ったのでブログにしてみました。

注意

本記事に実装されているselectフォームですが、WordPressの一部テーマでテキストが切り替わらない不具合が確認できています(本サイトの場合、PCでは問題ありませんが、WPtouch利用しているスマホではテキストが切り替わりません)
⇒代替デモとして
https://www.nakamurayuji.com/demo/select_demo.html
を準備しました。
⇒でしたが、jQuery部分「$(function()」を「jQuery(function()」のように「$」を「jQuery」と書き換えることで動作しているようです。WPtouchでも問題ないこと確認しました(2015/7/4)

オリジナルのSelect要素

appearance:noneを利用してみる？

いろいろ調べたところ、CSSのappearanceプロパティを使用することで、オリジナルなSelect要素のデザインをいったんリセットできるらしいとのことでしたが、
参考：CSSのappearanceを使ったセレクトボックスのカスタマイズ | design edge

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

どうも、Internet Exploler等ではベンダープレフィックス含め対応していないようです。
ここに関しては色々な対策が見つかりますが、僕は今回紹介する方法が一番、わかりやすいと思いました。
(参考) CSS3でセレクトボックスをカスタマイズ – to-R
結構トリッキーでユニークな方法とは思いますが、次のようなHTML/CSSを記述することで実現出来ます。

下記要素例その1のHTML/CSS/jQueryコード例です

☆HTML

<div class="divclass">
<select name="sentakushi" size="1" id="sentakushi_form">
    <option value="" selected>下記から選んで下さい</option>
    <option value="A">選択肢A</option>
    <option value="B">選択肢B</option>
    <option value="C">選択肢C</option>
    <option value="D">選択肢D</option>
</select>
<div id="sentakushi_form2">下記から選んで下さい</div>
<script>
jQuery(function(){
	jQuery("select#sentakushi_form").change(function(){
		jQuery("div#sentakushi_form2").text(jQuery("option:selected",this).text());
	}).trigger("change");
});
</script>
</div>

☆CSS

.divclass {
position:relative;
margin-bottom:40px;
}

#sentakushi_form {
position:absolute ;
	zoom:1.1;
	z-index: 1000;
	opacity: 0;
	border:0;
	width:200px;
	height:20px;
}

div#sentakushi_form2 {
	border:2px solid #f85;
	padding:0;
	padding-left:10px;
	position:relative;
	line-height:20px;
	width:200px;
	white-space:nowrap;
	overflow:hidden;
	-webkit-text-overflow:ellipsis;
	text-overflow:ellipsis;
	z-index: 1;
}
div#sentakushi_form2:before {
	content:"";
	display: block;
	width:20px;
	height:20px;
	background : #f85;
	border-radius: 0;
	padding:0;
	position: absolute;
	right:0;
	top:0;
}
div#sentakushi_form2:after {
	content:"";
	width:0;
	height:0;
	display: block;
	border:4px solid transparent;
	border-top:8px solid white;
	position: absolute;
	right:5px;
	top:6px;
}

実装のポイント

・本来のselect要素とデザイン用のdiv要素を重ねて配置します。
・select要素を完全に透明(opacity:0;)に、かつ、前面に配置(z-index=1000;　※背景の値より大きい数値を指定)することで、見た目のデザインは、背後のdiv要素が有効となり、selectとしての機能も維持されます。
・そして、見た目のデザインを背景のdiv要素で行います。その際、擬似要素：before、after等をうまく使えば色々なデザインが可能になります。今回の例では、before、after要素で色付きの下向き三角形を配置しました。
　　※三角形の作成方法：(参考) CSSのみで三角形を作る方法を解説するよ！｜ついでに扇型や吹き出しも作ってみる – アイデアハッカー
・そして、これがなかなかおもしろいのですが、以上の方法だけだと、selectで選択肢を選んでも文字が変わりません。なので、jQueryを使って表示用の文字列を置き換えます。
◯この実装方法で実現したselectボックスが下記の例その1となります。
◯あとは色々なバリエーションを試してみたいと思います。

カスタマイズしたSelect要素例その1

カスタマイズしたSelect要素例その2

◯こちらは例その1の派生で出来ます。

動作確認

◯今回紹介した方法は以下の環境で正常表示となることを確認しています。
※WordPressに実装した場合一部テーマで動作しない状況がありましたが上記「注意」のように改善しています(全てのWordPressテーマでの確認は出来ませんので実装時に各自ご確認下さい、2015.7.4現在)。
◆実機
・Mac OS(10.10.3)-Chrome(43.0.2357.130 ),Safari(8.0.6),Firefox(38.0.5)
・Windows7-IE(11.0.9600.17843),Chrome(43.0.2357.130 ),Firefox(38.0.5)
・iPhone4S(8.3)-Safari,Chrome
◆シミュレータ、エミュレータ
・Windows7-IE9,10(IE11上のEmulation) ※IE8以下は表示が乱れます。
・Androidシミュレータ(Genymotion)-Google Nexus S-4.1.1,Google Nexus 4-5.1.0
・Apple iOSシミュレータ-iPad 2-Safari

参考サイト(有難うございます)

CSSのappearanceを使ったセレクトボックスのカスタマイズ | design edge
CSS3でセレクトボックスをカスタマイズ – to-R
CSSのみで三角形を作る方法を解説するよ！｜ついでに扇型や吹き出しも作ってみる – アイデアハッカー

最後に・課題

・jQueryまわりで動作しない状況があり焦りましたが、解決できてそうで安心しました。(jQueryのバッティング)
・selectボックスの見た目を変更する方法を理解出来ましたので、色々応用していきたいと思います。

///////////////