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

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

Solution

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.