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