Redesign select to design I want

Question

I have a select box as below:

However, I want to change the design to this:

Anyone know a technique to do this in css? Or is it even possible? Thank you in advance.

This is not an on topic question as it stands now. Please add effort and code. But first google "style select css" then you will find things like this https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — mplungjan, Jul 30 '17 at 16:23

score 1 · Accepted Answer · answered Jul 31 '17 at 03:13

HTML:

<select  id="my_selection">
</select>

CSS:

#my_selection {
    -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */
   background-image: url(../img/drop-down.png);  /* add custom arrow */
   background-repeat: no-repeat;
   background-position:right center;
}

Use the following code to accomplish what you want.

Redesign select to design I want

1 Answers1