Styling a <select> dropdown

Question

I am trying to style a <select> dropdown to look something similar to this. As in I want the grey background on page load and then the blue-ish color when it is active.

Here is what I have gotten so far. The main thing I'm trying to figure out is the colored block with the arrow to the right of the element.

select { background: url(media/icons/down_arrow.png) no-repeat 90% ; background-size: 15px 10px; height: 30px; overflow: hidden; width: 100px; font-size: 14px; padding: 5px 10px; border: 2px solid #777; border-radius: 10px; background-color: #EEE; color: #000; -webkit-appearance: none; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5); } select:active, select:focus, select:hover { border: 2px solid #55E; }

<select> <option>1000</option> <option>2000</option> <option>3000</option> <option>4000</option> <option>5000</option> </select>

P.S. the png is just a down arrow that is 15px x 10px

May be of some use to get things rolling: w3schools.com/howto/howto_custom_select.asp — MattHamer5
– MattHamer5, Commented Apr 23, 2019 at 13:34
Possible duplicate of How to customized select element through css? — random_user_name
– random_user_name, Commented Apr 23, 2019 at 13:40
@cale_b Sorta, but technically not a duplicate, as this is asking for help with applying a specific style look that is different from that question, which is asking for help with applying a different specific style. — TylerH
– TylerH, Commented Apr 23, 2019 at 13:59
@TylerH - I hear that and understand. Do you think SO should contain answers for every possible specific style request for every possible html element? — random_user_name
– random_user_name, Commented Apr 23, 2019 at 18:07

Temani Afif · Accepted Answer · 2019-04-23 13:49:19Z

You can consider gradient coloration

select { background: /*to replace the arrow*/ linear-gradient(to bottom right,#fff 48%,transparent 50%) right 7px top 50%/8px 10px, linear-gradient(to bottom left,#fff 48%,transparent 50%) right 15px top 50%/8px 10px, /* remove the above gradient and uncomment the below to use your arrow url(media/icons/down_arrow.png) right 5px top 50%/15px 10px, */ var(--c,linear-gradient(#939393,#595959)) right/30px 100%, linear-gradient(#fffff9,#cfced5); background-repeat:no-repeat; font-size: 18px; padding:10px 40px 10px 10px; border: 2px solid #777; border-radius: 10px; color: #000; -webkit-appearance: none; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5); } select:active, select:focus, select:hover { border: 2px solid #55E; /*Used a variable to avoid repeating all the background definition*/ --c:linear-gradient(#6c81b7,#264091); }

<select> <option>1000</option> <option>2000</option> <option>3000</option> <option>4000</option> <option>5000</option> </select>

Thanks thats exactly what I needed, didn't realize you could add multiple statements to the background

Collectives™ on Stack Overflow

Styling a <select> dropdown

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related