【CSS】角丸で▼マークのついたセレクトボックスを作る

角が丸くて、右に三角マークのついたセレクトボックス(ドロップダウンリスト、プルダウンリスト)を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;
}

コメント

タイトルとURLをコピーしました