Qrara
@Qrara (Qrara)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

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

解決したいこと

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

↓これを
スクリーンショット_20221126_195305.png

↓これにしたいのですが、上手くいきません。
スクリーンショット_20221126_195315.png

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

該当するソースコード

<form>
   <dl>
      <dd>
         <label for="contact"><h3>お問い合わせ項目</h3></label>
         <select class="select" type="select" name="contact">
            <option value=""><h4>項目1</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/
こちらの疑似要素を使ったやり方も試してみましたが、上の画像通りの矢印にできません。
どなたか教えてください。

0

1Answer

こうでしょうか

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

image.png

.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

  1. @Qrara

    Questioner

    できました!!
    ありがとうございます!!!

Your answer might help someone💌