css - 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