Kendo UI DropDownList - скиннинг с CSS

Question

Я пытаюсь обрезать виджет Kendo UI DropDownList для своего собственного сайта и имел довольно хороший успех с небольшим предостережением, которое сводит меня с ума.

Я включаю ссылку на jsBin, которая демонстрирует проблему, и некоторые скриншоты. Но в основном то, что происходит, - это то, что я хочу, чтобы весь раскрывающийся список был плоским (без радиуса границы), а затем был очень твердым (белый фон, черный текст) и текущим выбранным элементом, чтобы иметь толстую красную полосу в качестве левой границы (3px в моем примере), а затем, когда вы наводите курсор на элементы в списке, их левая граница становится толстой зеленой/синей полосой.

Работает, за исключением некоторых странных проблем с расстоянием; Прежде всего, когда я курю над вещами, они «прыгают». Они пробиваются таким образом, и это немного неприятно, что делает его ощущением неравномерности. Я действительно хочу это исправить; и то, что меня заводит, - это то, что «бар», который я использую на левой границе, имеет странную кривизну, делая его очень неуместным, как будто он почти скошен. Может ли кто-нибудь помочь с этим?

jsBin Example

Answer 1

.custom-dropdown .k-item { 
    background: white; 
    font-weight: lighter; 
    padding: 0 4px; 
    border-left: solid 2px white; // add this 
} 

.custom-dropdown .k-item.k-state-selected, 
.custom-dropdown .k-item.k-state-focused { 
    color: black;     // and add this 
    border: solid 1px white; 
    border-left: solid 3px #b91d47; 
} 

Я не думаю, что там ничего делать для странной кривизны.

http://www.w3schools.com/css/css_border.asp

http://jsbin.com/elOSuDo/1/edit обновленный jsbin