Anak panah lungsur tersuai

Question

Adakah mungkin untuk menukar anak panah jatuh turun teg pilih kepada anak panah tersuai yang terdiri daripada 4 elemen. Saya mahu ia kelihatan seperti ini: 3 garisan mendatar di sebelah kiri dan anak panah ke bawah di sebelah kanan

Saya berjaya mencapai kesan ini dengan satu elemen (garisan mendatar)

.select-wrapper::before {
        kandungan: "";
        jawatan: mutlak;
        atas: 50%;
        paparan: blok;
        lebar: 9px;
        ketinggian: 2px;
        latar belakang: hitam;
    }

Answer 1

Saya percaya anda mahu mencapai sesuatu yang serupa dengan KodPen ini. Kod ini datang hampir keseluruhannya daripada jawapan SVNM kepada soalan ini

Sunting daripada jawapan ini

• Gunakan imej untuk mencipta garisan/anak panah yang anda huraikan, mungkin lebih baik jika anda tahu cara menggunakan SVG
• Penempatan dan saiz imej latar belakang

Contoh HTML

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

CSS

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("https://paul7dxb.github.io/hosted-assets/SomePNGs/arrow.png");
  background-repeat: no-repeat;
  background-size: 40px 20px;
  background-position-x: 80%;
  background-position-y: 50%;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}