nicepaper @ ウィキ
nicepaper @ ウィキ

セレクトボックスをスマートフォン風にする方法について記述していきます。11月26日記事

イメージ



画像を適当に用意する

最近では、高密度デバイスが増えてきているので画像も少し大きめに作成します。CSSの方で調整してくれるので、arrow_b.pngの方は80×160、arrow_cの方は160×160でとりあえず作りました。 もう少し小さくてもいけます。

コード

HTML 

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>スマートフォン風のセレクトボックス</title>
</head>

<body>
	<form action="hoge.php" method="post">
		<div class="select01">
			<select>
				<option value="0">選択してください。</option>
				<option value="1">日本料理</option>
				<option value="2">ロシア料理</option>
				<option value="3">中華料理</option>
				<option value="4">インド料理</option>
			</select>
		</div>
		<br>
		<br>
		<div class="select02">
			<label>
				<select>
					<option value="0">選択してください。</option>
					<option value="1">サッカー</option>
					<option value="2">ラグビー</option>
					<option value="">野球</option>
					<option value="3">柔道</option>
					<option value="4">剣道</option>
				</select>
			</label>
		</div>
	</form>
</body>

</html>

CSS 

@charset "utf-8";
/* CSS Document */

* {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.select01 select {
	width: 400px;
	/*スマートフォン時は100%などにする。*/
	
	padding: 10px;
	appearance: none;
	-webkit-appearance: none;
	/*ベンダープレフィックスつけておく*/
	
	-moz-appearance: none;
	/*ベンダープレフィックスつけておく*/
	
	border: 1px solid #FA0;
	background: #EEE;
	background: url(arrow_b.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%, #FEC 100%);
	background: url(arrow_b.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%, #FEC 100%);
	background-size: 20px, 100%;
	/*矢印の画像ボタンの調整。これを記述すると大きい画像でもフィットしてくれる*/
}
/*セレクトタグ*/

.select02 select {
	position: relative;
	width: 400px;
	/*スマホの場合100%などにする。*/
	
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #FA0;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	background: #EEE;
	background: -webkit-linear-gradient(top, #fff 0%, #FEC 100%);
	background: linear-gradient(to bottom, #fff 0%, #FEC 100%);
}
.select02 label {
	position: relative;
}
.select02 label:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	/*真ん中に*/
	
	right: 20px;
	width: 20px;
	height: 20px;
	margin-top: -8px;
	background: url(arrow_c.png) 0 0 no-repeat;
	background-size: 20px;
	/*矢印の画像ボタンの調整。これを記述すると大きい画像でもフィットしてくれる*/
	
	pointer-events: none;
}
select::-ms-expand {
	/*IE対策*/
	
	display: none;
}



まとめ

オレンジ風で仕上げました。CSSの方は色やよく変更しておくところを下の方にしておくとあとあと変更しやすいです。

以上

「スマホ風セレクトボックス」をウィキ内検索
最終更新：2015年11月26日 23:41
添付ファイル