【HTML&CSS】セレクトボックスの「▼」表記を変更する方法
今回は、Webサイトのコーディングにおいて、セレクトボックスに付随している「▼」マークの表記を変更する方法について記載していきます。
使用するケース
セレクトボックスの「▼」マークは、セレクトボックスを実装する際にブラウザごとに自動で表示されます。
そのため、「ブラウザごとにマークを統一したい」「全体のデザインに合ったものにしたい」といった意図があれば、カスタマイズを行いましょう。
サンプル
方法
方法について、説明していきます。
まずはデフォルトで表示されるブラウザごとの「▼」を削除します。
CSSで下記の記述を行います。
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
select::-ms-expand {
display: none;
}appearance: none;
を記述することで、初期で設定されているスタイルを削除することができます。
ベンダープレフィックスを付けて各ブラウザにも対応させるのですが、IEのみ特殊で
select::-ms-expand {
display: none;
}
という記述をする必要があります。
これでデフォルトの「▼」が消えます。
これから「▼」に変わる別のマークを設定していくのですが、
・「Font-Awesome」のアイコンを使う方法
・画像を使う方法
に分けて、それぞれ説明していきます。
共通部分のコード
HTMLには下記のように記載していきます。
<form action="">
<dl>
<dt><label for="select">セレクトタイトル</label></dt>
<dd class="sbox">
<select name="" id="select">
<option value="">選択肢1</option>
<option value="">選択肢2</option>
<option value="">選択肢3</option>
<option value="">選択肢4</option>
</select>
</dd>
</dl>
</form>「▼」の代わりは疑似要素として記述するので、
「dd(class="sbox")」には「position: relative;」を付けます。
.sbox {
position: relative;
}ここからそれぞれのパターンでsboxの疑似要素を記載していきます。
「Font-Awesome」のアイコンを使用する場合
head内にFont-Awesome読み込み用の記述を行います。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">Font-Awesome上で、使用したいアイコンを選定します。
こちらから飛べます
ただ通常であれば、アイコンを選んでから
<i class="～"></i>
のような特有のタグをHTMLに記述することでアイコンが使用できますが、疑似要素にはこのタグは使用できません。
疑似要素内で使う場合は、まずアイコンを選択した画面の左上のuni-codeを疑似要素のcontentとして、バックスラッシュの後に追記します。
.sbox::after {
content: "\f358";
}その後、「font-family」と「font-weight」を、こちらのページ中腹のスタイル設定表を参考に指定します。
無料のものを使用する場合は基本的に
font-weight: 900 ;
font-family: Font Awesome 5 Free ;
を記述すればOKかと思われます。
.sbox::after {
content: "\f358";
font-weight: 900 ;
font-family: "Font Awesome 5 Free" ;
}これで疑似要素内でFont-Awesomeが使用できます。
次にposition、font-size、heightなどのプロパティで見た目部分を整えていきます。下記記述例となります。
.sbox::after {
height: 30px;
line-height: 30px;
font-size: 16px;
position: absolute;
top: 0;
right: 10px;
content: "\f358";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}height: 30px;
line-height: 30px;
font-size: 16px;
について、「sbox」と同じ記述を行うことでアイコンの縦の位置が自然に表示されるようになります。
こちらで見た目が整いましたが、現状はクリックできるスペースを上記の疑似要素が覆ってしまっているため、疑似要素の上からクリックができない状態です。
そのため
pointer-events: none;
を追記し、クリックできるようにしましょう。
最終的には下記の記述となります。
.sbox::after {
height: 30px;
line-height: 30px;
height: 30px;
line-height: 30px;
font-size: 16px;
position: absolute;
top: 0;
right: 10px;
content: "\f358";
font-family: "Font Awesome 5 Free";
font-weight: 900;
pointer-events: none;
}画像を使用する場合
画像を使用してマークを設定する場合は、画像を疑似要素の背景画像として下記のように指定します。
.sbox::after {
content: "";
position: absolute;
top: 0;
right: 10px;
width: 30px;
height: 30px;
background-image: url(down.png);
background-size: 60%;
background-repeat: no-repeat;
background-position: right center;
pointer-events: none;
}content: “";
で中身がない疑似要素を生み出します。
position:absolute;
top: 0;
right: 10px;
で「sbox」範囲内の右側に位置させます。
width: 30px;
height: 30px;
のように、縦と横の幅を定義します。
background-image: url(down.png);
background-size: 60%;
background-repeat: no-repeat;
background-position: right center;
で背景画像の各指定を行います。
サイズは調整します。
pointer-events: none;
最後に画像の上からクリックできる処理を入れて完成です。
以上となります。