MENU

セレクトメニューカスタマイズ

HTML/CSS

お問い合わせフォームでよく使われる、セレクトメニュー。

セレクトメニューの枠線、矢印マークのカスタマイズです。

目次

作りたいもの

See the Pen Untitled by Mocha (@tomokoro) on CodePen.

HTML

<form class="form">
  <div class="form__item">
    <select name="select" class="">
      <option value="">選択してください</option>
      <option value="スパークリングワイン">スパークリングワイン</option>
      <option value="白ワイン">白ワイン</option>
      <option value="赤ワイン">赤ワイン</option>
     </select> 
   </div>
</form>

CSS

/* デフォルトのスタイルをリセット */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

.form__item {
  max-width: 500px;
  margin: auto;
  position: relative;
}

.form__item select {
  border: 1px solid darkgreen;
  cursor: pointer;
  display: block;
  font-size: 0.75rem;
  height: 2.5rem;
  padding-left: 0.5rem;
  max-width: 500px;
  width: 100%;
}

.form__item::before {
  border-color: darkgreen transparent transparent transparent;
  border-style: solid;
  border-width: 9px 6px 0 6px;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 0;
}

注意点①

selectタグにもともと設定されているCSSをリセットする必要があります。

注意点②

矢印の▼は疑似要素でつくっています。

selectタグには疑似要素はつけることができないので注意が必要です。

今回はselectタグの親要素を基準にして、親要素に疑似要素をつけています。

HTML/CSS
よかったらシェアしてね！
  • URLをコピーしました！
目次