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

No apology needed Ramesh, just adding some advice for your future questions! Proposals of duplicate questions are in fact _helpful_, and many a time I have seem them solve the problem at hand. — halfer, Sep 01 '18 at 15:48
The duplicate register on this is about positioning a custom arrow. Not the default.It's poor form to falsely flag things as duplicate. — m12lrpv, May 05 '22 at 23:28

Nixon Kosgei · Answer 1 · 2022-01-10T16:43:54.143

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

score 5 · Accepted Answer · edited Jan 10 '22 at 16:51

5

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.

edited Jan 10 '22 at 16:51

TylerH

20,799
66
75
101

answered Aug 06 '18 at 06:33

dkulkarni

2,780
4
27
36

Is there no other way? instead of replacing the arrow ,set the position as I wanted – Ramesh Aug 06 '18 at 06:56
I am afraid not. That's just how they are designed to work. You're better off changing the appearance to suit your needs. – dkulkarni Aug 06 '18 at 07:00

score 1 · Answer 3 · answered Aug 06 '18 at 06:35

this code select custom appearence,what is your problem:

<select class="white_select select_category">
   <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>

.white_select {
    background: rgba(255,255,255,1) url(../../../assets/images/down-arrow.png) no-repeat scroll calc(5% + 3px) center/8px auto;
    width: 100%;
} 

.select_category {
    font-size: 9px;
    border-radius: 10px;
    padding: 6px 4px;
    border: 1px solid #d7d7d7;
    background: #fff;
    background: rgba(0,0,0,0) url(../../../assets/images/down-arrow.png) no-repeat scroll calc(5% + 3px) center/8px auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #939598;
}

It's even the same. I want to keep the arrow as the way it is. Your answers is like to replace the icon. Is there any other way? — Ramesh, Aug 06 '18 at 06:41

score 1 · Answer 4 · answered Aug 06 '18 at 06:40

1

Change position of custom arrow in select options.

background: url(../images/downarrow.png) 97% center no-repeat !important;

answered Aug 06 '18 at 06:40

Billu

2,733
26
47

Seems the same. Are there no option to keep the arrow as the way it is and change the position? – Ramesh Aug 06 '18 at 06:42
@Ramesh, it will work when you will use down arrow image to replace exiting down arrow. – Billu Aug 06 '18 at 07:09
Yeah I changed the code and it worked. Thank you for your time and answer – Ramesh Aug 06 '18 at 07:21

score 0 · Answer 5 · answered Aug 06 '18 at 06:58

There is no special pseudo elements for select dropdown icon in css.

But you can change the position of the icon by background property.

Or else use this kind of "height" or "line-height" for good look.

.select_category{
  outline: none;
  height: 50px;
  line-height: 50px;
  padding:0px 20px;
}

<select class="white_select select_category">
   <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>

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

5 Answers5