Настройка Выпадающая Выберите с помощью CSS

Question

Я пытаюсь получить мою кнопку выпадающей выглядеть как этот:

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

И не тренировки, как получить стрелку, глядя, как, что на поле формы. Может ли кто-нибудь помочь или предложить, с чего начать?

Просто, чтобы подтвердить, что я ищу только кнопку, а не то, что происходит после ее нажатия.

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

Заранее спасибо!

Answer 1

Вам нужно добавить следующий код в 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; 
} 

Заменить IMAGE_URL с источником изображения, которое вы хотите поместить как стрелку раскрывающегося списка.

Вот в JSFiddle с примером для того же