「スマホ風セレクトボックス」の編集履歴（バックアップ）一覧はこちら
「スマホ風セレクトボックス」(2015/11/26 (木) 23:41:55) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
セレクトボックスをスマートフォン風にする方法について記述していきます。11月26日記事
セレクトボックスをスマートフォン風にする方法について記述していきます。11月26日記事
~
~
イメージ
&image(width=400,select001.png)
~
~
*画像を適当に用意する
最近では、高密度デバイスが増えてきているので画像も少し大きめに作成します。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の方は色やよく変更しておくところを下の方にしておくとあとあと変更しやすいです。
~
~
以上
