Мне нужно изменить стиль пунктов (option) в select.
А именно - высоту, цвет границы рамки при выпадении списка.
Как это можно сделать?
https://jsfiddle.net/qdwuqj5b/1/<div class="ui_select_2">
<select>
<option>--Select--</option>
<option>Hello 1</option>
<option>Hello 2</option>
<option>Hello 3</option>
<option>Hello 4</option>
</select>
<div class="ui_select_2_arrow">
</div>
</div>
.ui_select_2 {
position: relative;
display: inline-block;
margin-bottom: 15px;
width: 100%;
}
.ui_select_2 select {
font-family: Arial;
width: 100%;
display: inline-block;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border: 1px solid #2E3138;
border-radius: 0px;
background: #0E1015;
color: #B2B2B2;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.ui_select_2 select::-ms-expand {
display: none;
}
.ui_select_2 select:hover,
.ui_select_2 select:focus {
color: #FFFFFF;
background: #0E1015;
}
.ui_select_2 select:disabled {
opacity: 0;
pointer-events: none;
}
.ui_select_2 option{
padding: 10px;
background: red;
}
.ui_select_2_arrow {
background: #0C7ECB;
color:#20555F;
content:'';
clip-path: polygon(49% 44%, 0 44%, 51% 0, 51% 0, 100% 44%, 49% 44%, 49% 59%, 100% 59%, 51% 100%, 51% 100%, 0 59%, 49% 59%);
transform: scale(1.4,1.4) ;
position: absolute;
top: 15px;
right: 15px;
width: 0;
height: 0;
border: solid #1A71AC;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.ui_select_2 select:hover ~ .ui_select_2_arrow,
.ui_select_2 select:focus ~ .ui_select_2_arrow {
border-top-color: #1A71AC;
}
.ui_select_2 select:disabled ~ .ui_select_2_arrow {
border-top-color: #1A71AC;
}