IVCatalina IVCatalina - 3 months ago 8
CSS Question

Customize Dropdown Select with CSS

I'm trying to get my dropdown button to look like this one:

https://www.progressive.com/auto/

And can't workout how to get the arrow looking like that on the form field. Can anyone help or suggest where to start?

Just to confirm I am only looking for the button itself, not what happens after it is clicked.

jsfiddle:

https://jsfiddle.net/6e4px6La/1/

<label class="select-label">
<select id="Type" class="size-select" name="customer_type">
<option value="" disabled selected>Please Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</label>


CSS:

select {
background-color: #fff;
border-color: #979797;
border-style: solid;
border-width: 1px;
width: 250px;
margin-left: 10px;
height: 50px;
}


Thanks in advance!

Answer

You need to add the following code to your CSS

.selectParent select {
border-color: #979797;
border-style: solid;
border-width: 1px;
width: 250px;
margin-left: 10px;
height: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
background: url("IMAGE_URL") no-repeat 235px center #fff;
}

Replace the IMAGE_URL with the source of the image you want to put as the dropdown arrow.

Here is the JSFiddle with an example for the same

Comments