セレクトボックスのスタイリング

CSS

やること

セレクトボックスをCSSでスタイリングする

初めに

すでに出来合いのセレクトボックスを利用することが多いので自分でちゃんとやったことなかったなーと思い、セレクトボックスのスタイリングをしてみました。
めちゃくちゃ基本的なHTMLとCSSしか使用していませんので、基礎の基礎って感じですね。

実践

ではやっていきましょう。

html

使用するHTMLはこんな感じになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
    <title>My test page</title>
</head>
<body>
    <div class="container">
        <div class="select">
            <select>
                <option>未選択</option>
                <option>いちご</option>
                <option>みかん</option>
                <option>すいか</option>
            </select>
        </div>
    </div>
</body>
</html>

初期状態

初めに何もスタイリングしない状態のセレクトボックスを見てみましょう。
f:id:sho03:20220125182236p:plain

うーんダサい。今時こんなセレクトボックスを見かけることはほぼないでしょう。

矢印を消す

まずは右端にある矢印を消してしまいましょう。

appearance: none;

はい、これだけで右端の矢印は消えます。

f:id:sho03:20220125182626p:plain

セレクトボックスを大きくする

今の状態のセレクトボックスだと、余白がなさすぎて文字が非常に読みづらいものとなっています。 　 そこで、paddingを用いて上下左右に少し余白を持たせることにしましょう。

padding: 10px 20px;

f:id:sho03:20220125183246p:plain

枠線を調整する

セレクトボックスを囲っている枠線を少し調整します。今回は青っぽい色にしましょう。

    border: 1px solid skyblue;
    border-radius: 8px;
    outline: none;

f:id:sho03:20220125183706p:plain

徐々にいい感じになってきましたか？ 続いて最初に消してしまった矢印を追加しましょう。

ここまでで、selectに対するスタイルは以下のようになっていると思います。

select {
    /* 矢印を消す */
    appearance: none;
    /* 余白を持たせる */
    padding: 10px 20px;

    /* 枠線の調整 */
    border: 1px solid skyblue;
    border-radius: 8px;
    outline: none;

    width: 100%;
}

矢印を追加する

矢印の追加は擬似要素を利用します。

.select {
    width: 100px;
    position: relative;
}

/*`after`が擬似要素。他にも色々あります*/
.select::after{
    position: absolute;
    top: 1.0em;
    right: 0.9em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid blue;
    pointer-events: none;
}

最終的には以下のようになります。

f:id:sho03:20220125185124p:plain