Как кастомизировать option у select?

Мне нужно изменить стиль пунктов (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;
}
  • Вопрос задан
  • 2201 просмотр
Решения вопроса 1
Maksclub
@Maksclub Куратор тега Веб-разработка
maksfedorov.ru
https://hemantnegi.github.io/jquery.sumoselect/
dimox.name/jquery-form-styler

Работают по принципу -- подменяют нативные селекты в дивы, которые легко можно кастомизировать
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы