Custom dropdown arrow

Question

Is it possible to change the dropdown arrow of the select tag to a custom arrow consisting of 4 elements. I want to make it like this: 3 horizontal lines on the left and a down arrow on the right

I managed to do it with only one element (one horizontal line)

    .select-wrapper::before {
        content: "";
        position: absolute;
        top: 50%;
        display: block;
        width: 9px;
        height: 2px;
        background: black;
    }

If you mean changing the visual, I suggest to get the icon element and change it to your curstom icon that you should probably create by your own. — Emerald Cottet, Aug 17 '23 at 06:31

score 0 · Accepted Answer · answered Aug 17 '23 at 06:40

I believe you are trying to acheive something similar to this CodePen. The code almost entirely taken from SVNM's answer to this question

Edits from that answer

Using an image to make the lines/arrow you describe although SVG may be better if you know how to do it
Positioning and size of the background image

Example HTML for this

<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;
}

Custom dropdown arrow

1 Answers1

Edits from that answer

Example HTML for this

CSS