0
Я пытаюсь создать фоновое изображение для раскрывающихся меню. Я преуспел, но ширина не работает. Как вы можете видеть в Fiddle, я дал ширину последнему параметру в раскрывающемся списке, но он скрывает текст при наведении курсора мыши. Если бы я не дал ширину, следующие изображения приближаются. (Для Ex: второй вариант).Как разместить фоновое изображение в раскрывающемся меню
Так что мой вопрос: как я могу получить фоновое изображение в начале параметров? (Как, как это отображение в варианте третьего ЗАКРЫТО)
HTML
<select class="select_filter" id="actif_search" style="width:140px; padding:5px 22px 6px 6px;">
<option value="1" style="padding-left:15px;" selected>ACTIVE</option>
<option value="2" class="open">OPEN</option>
<option value="3" class="closed">CLOSED</option>
<option value="4" class="pending">PENDING</option>
</select>
CSS
#actif_search .open{
background: rgba(0, 0, 0, 0) url('https://s14.postimg.org/oax1a438h/all_list_icons.png') no-repeat scroll -11px -57px;
padding-left: 20px !important;
margin-left: -5px;
}
#actif_search .closed{
background: rgba(0, 0, 0, 0) url('https://s14.postimg.org/oax1a438h/all_list_icons.png') no-repeat scroll -51px -57px;
padding-left: 20px !important;
margin-left: -5px;
}
#actif_search .pending{
background: rgba(0, 0, 0, 0) url('https://s14.postimg.org/oax1a438h/all_list_icons.png') no-repeat scroll -30px -57px;
padding-left: 20px !important;
margin-left: -5px;
width: 5px;
}
не работает в хроме на OSX. В настройках нет изображений. Я считаю, что единственный способ сделать это - не использовать собственный элемент управления select. Если вы уверены, что это хорошая идея, используйте что-то вроде https://github.com/hernansartorio/jquery-nice-select или https://silviomoreto.github.io/bootstrap-select/examples/. –
и в хромированном виде в окнах. FYI, это будет иметь проблемы совместимости. –
Я пытаюсь с Firefox. Итак, какое решение лучше всего использовать во всех браузерах? –