[Q&A] formのselect右の矢印をデザインしたいです。

formのselect右の矢印をデザインしたいです。

解決したいこと

htmlとcssのみで,formのselect右の矢印をデザインしたいです。

↓これを

↓これにしたいのですが、上手くいきません。

ネットでいくつか参考ページを探して、backgorund-imageで画像を載せるやり方もありましたが、他にもやり方はあるでしょうか。
分かる方教えてください！

該当するソースコード

<form>
   <dl>
      <dd>
         <label for="contact"><h3>お問い合わせ項目</h3></label>
         <select class="select" type="select" name="contact">
            <option value=""><h4>項目１</h4></option>
            <option><h4>項目2</h4></option>
            <option><h4>項目3</h4></option>
            <option><h4>項目4</h4></option>
         </select>
       </dd>
    </dl>
</form>

例）

.select {
  padding-left: 20px;
  height: 60px;
  width: 350px;
  margin-top: 10px;
  margin-bottom: 20px;
  border-radius: 0;
  border: 1px solid #333;
  content: "▼";  <!-- ←反映されません -->
}

自分で試したこと

https://junpei-sugiyama.com/select-arrow/
こちらの疑似要素を使ったやり方も試してみましたが、上の画像通りの矢印にできません。
どなたか教えてください。

1Answer

@YumaInaura posted at 2022-11-26

こうでしょうか

container::after だけにしてあとは色・大きさ・位置を調整すればよいのでは

.container {
  margin: 50px auto 0;
  position: relative;
  width: 100px;
}
select {
  -webkit-appearance: none;
  appearance: none; /* デフォルトの矢印を非表示 */
  border-radius: 0;
  height: 37px;
  padding-left: 10px;
  width: 100px;
}
select::-ms-expand {
  display: none; /* デフォルトの矢印を非表示(IE用) */
}
/* セレクトボックスの矢印デザイン変更 */
.container::before {
}
.container::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid grey;
  content: "";
  position: absolute;
  right: 9px;
  top: 15px;
  width: 0;
}

1Like

Comments

@Qrara
Questioner
できました！！
ありがとうございます！！！