How to change the position of a drop down arrow in CSS

Question

NOT A DUPLICATE-please read carefully and understand the question.I don't want to replace the arrow. I want to keep the arrow as the way it is and change it's position. appearance:none can hide the arrow and by setting background:url() I may be able to replace the arrow,but that's not my question

I have a dropdown list which appears good and works fine. We all know by default it adds a dropdown arrow at the right side of the dropdown list.Now what I want to do is to move the arrow bit lower to the position like margin-top:5px. But I can't find any pseudo elements or classes to write my code. I want to achieve this using only css. I found styles written to hide the element and add another one, but in my case I want to keep the icon as the way it is and change the position.

html

<select class="dropdown-select">
   <option value="">Select Location</option>
   <option value="location-1">Location 1</option>
   <option value="location-2">Location 2</option>
   <option value="location-3">Location 3</option>
</select>

css

.dropdown-select{
  outline: none;
  border: none;
}

Answer 1

Checkout how bootstrap is doing it here. in summary, they hide the original with appearance: none and add a custom SVG icon using background-image property

Here is a quick example

select {
    display: block;
    width: 100%;
    font-size: 1em;
    padding: 0.8rem 0.5rem;
    border: 1px solid #333;
    font-family: inherit;
    /** for the dropdown indicator */
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

Answer 2

It's not ideal to do it this way regardless. The <select> element particularly is hard to style. I would recommend changing the appearance instead via appearance: none;

This post is a good place to start.