[CSS] スマホ向けにセレクトメニューの装飾

お仕事のことからプライベートなことまで色々と変化が多いのでブログに書こうと思うも何かと理由をつけて得意の後回しにしてしまっています。最後のブログ更新がもう1年以上も前というもはや体をなしていない状態ではありますが久しぶりに記事を書きたいと思います。訪問してくれた方々、感謝です。

いつもながら手を出しやすいお仕事ネタで恐縮ですが過去に [CSS] スマホ向けにラジオボタンの装飾 [CSS] スマホ向けにチェックボックスの装飾という記事を書いたことがありました。そして今回は<select>をスマホで見た際にタップしやすいような装飾にカスタマイズしてみたいと思います。

まずHTMLは<select>とそれを囲む親要素に<div>になります。親要素の<div>に本質的な意味はないのですが今回はセレクトメニューにアイコンを設置して視覚的な遊びを取り入れるために定義しています。

<div class="select">
    <select>
        <option>選択してください</option>
        <option>とんかつ</option>
        <option>ラーメン</option>
        <option>ステーキ</option>
    </select>
</div>

そして装飾のCSSが以下。

.select {
    position: relative;
    width: 200px;
    border: #ccc solid 2px;
    border-radius: 3px;
}
.select::after {
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -8px;
    content: "\f0f5";
    color: #ccc;
    font-size: 16px;
    font-family: fontAwesome;
    z-index: -1;
}
.select > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    box-sizing: border-box;
    padding-left: 8px;
    border: none;
    background-color: transparent;
    border-radius: 0;
    outline: none;
}

  実際のデモはこちら

アイコンにはFont Awesomeのウェブアイコンフォントを手っ取り早いので使っています。そのため先述した親要素の<div>を必要としただけです。<select>タグの背景画像にアイコンを定義する場合は不要箇所を適宜カットすればもっとすっきりしたソースコードで完結できると思います。

  • 2017.06.23
  • お仕事っぽいこと