列表框在Chrome中无法正常显示

Question

您好我正在尝试为列表框添加一些背景颜色和边框，并在选项的右侧和底部显示一些白色条带。当我将鼠标悬停在每个项目上时，它们会被正确重新排列。

  <select>
     <option>Hello</option>
     <option>World</option>
  </select>​

CSS是

  select {
    background: Red;
    border: 1px solid #ccc;
    color: white;
    width: 100px;  
  }
  select option{
    margin : 0   
  }

  select:active {
    background: -webkit-linear-gradient(#666, white);
  }

请在行动here中查看。我可以看到每个选项右侧的白色条带和所有选项的底部。如何摆脱它？

Answer 1

添加option{background:red}

DEMO