角が丸くて、右に三角マークのついたセレクトボックス(ドロップダウンリスト、プルダウンリスト)をHTMLとCSSだけで作ります。
ポイントは、CSSの便利な疑似要素「before」を使って、▼を表現するところにあります。
完成イメージ
HTML
セレクトボックス全体をgengo_selectbox_area
と名付けたclassで囲います。
<div class="gengo_selectbox_area">
<select name="gengo" class="gengo_selectbox">
<option value="heisei">平成</option>
<option value="reiwa" selected>令和</option>
</select>
</div>
CSS
.gengo_selectbox_area::after { content: "▼"; }
の部分でテキストの後に▼マークを付与しています。ちなみに::beforeとすることで、テキストの前に付与することができます。
このままだと、▼マークの位置がずれてしまうので、親要素である.gengo_selectbox_area
のpositionをrerative、議事クラスである.gengo_selectbox_area::after
のpositionをabsoluteにします。
/* セレクトボックスのフォーカス時のブラウザが付加する枠線を非表示 */
:focus {
outline: none;
}
/* ::after要素をabsoluteで表示するために記載 */
.gengo_selectbox_area {
position: relative;
margin: 0em 0em 0em 0em;
float: left;
}
/* セレクトボックス項目の後に"▼"を追加 */
.gengo_selectbox_area::after {
pointer-events: none; /*矢印部分をクリックを可能にする*/
position: absolute;
color: #666666;
top: 50%;
left: 6.7em;
transform: translateY(-50%); /*▼を上に移動*/
content: "▼";
}
.gengo_selectbox {
/*元々の<select>のスタイルを削除 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*今回指定する<select>のスタイル */
width: 7em;
height: 2.5em;
border: none;
border-radius: 8px;
font-size: 1.2em;
padding: 0em 1em 0em 1em;
}
コメント