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