スマホセレクトボックスの脱デフォルトスタイル

こんな事で困ったことありませんか？

セレクトボックスのデザインがスマホ画面で見るとこんなに変わります。

PC画面

スマホ画面

セレクトボックスがスマホのデフォルトスタイルに従ってしまいました。

ちなみにソースはこんな感じです。

	<div class="selectbox">
		<select>
			<option>-未選択-</option>
			<option>担々麺</option>
			<option>小籠包</option>
			<option>天津飯</option>
		</select>
	</div>

	<style>
	.selectbox{
		border: 2px solid #bdbdbd;
	}
	select{
		width: 100%;
		border: none;
	}
	</style>

ではでは、このデフォルトスタイルから脱出するには、どうすればいいでしょうか？

お試しで下記一行の-webkit-を追加してみました。

CSS

		<style>
		select{
			-webkit-appearance:none;
		}
		</style>
	

(そもそもwebkitとはなんぞやって思う方、appearanceプロパティについて詳しく知りたり方は、こちらのサイトをご参考ください。)

スマホでもう一度確認してみましょう

おぉ！見事に出来たんじゃないですか！と思いきや、右側にある小さい三角がどこかに消えてしまいました。

ここで、疑似クラス::afterを用いて三角を入れてみましょう。

追加したCSS

	.selectbox{
		position:relative;
	}
	.selectbox::after{
		position: absolute;
		top: 35%;
		right: 3%;
		margin-top: -8px;
		content: "▼";
		color: #333;
	}

今回はどうでしょう。確認してみます。

もう大丈夫みたいですね！

と、ここで　Point　です。

::afterで入れた三角をクリックしても反応しないことがあります。この状況を避けるため、もう一行入れておくと安心です。

追加したCSS

	.selectbox::after{
		pointer-events: none;
	}

pointer-eventsはマウスやタッチによるイベントを制御できるCSSプロパティーです。
pointer-eventsをnoneに設定することによって、該当要素がマウスイベントのターゲットになることはありません。よくページ内の文章や画像をコピーされたくない時に使われます。

コードまとめ

	<div class="selectbox">
		<select>
			<option>-未選択-</option>
			<option>担々麺</option>
			<option>小籠包</option>
			<option>天津飯</option>
		</select>
	</div>

	<style>
	.selectbox{
		border: 2px solid #bdbdbd;
		position:relative;
	}

	/* 三角を入れる */
	.selectbox::after{
		position: absolute;
		top: 35%;
		right: 3%;
		margin-top: -8px;
		content: "▼";
		color: #333;
		pointer-events: none; /* マウスイベントを無効にする */
	}

	select{
		width: 100%;
		border: none;
		-webkit-appearance:none; /* デフォルトスタイルをリセットする */
	}
	</style>

最後に、注意点として

ブラウザー対応について、「Can I use_?」で調べてみたところ、IE MobileとMicrosoft Edgeを含め、グローバルブラウザー対応率91.56%(2018年2月時点)となっています。

Firefox固有の-moz-appearanceプロパティは2017年2月から廃止され、-webkit-で対応できるようになりました。

参考サイトはこちら：

いかがでしたか？あなたもスマホセレクトボックスを自分好みにカスタマイズしてみましょう。