如何禁用多选的拖动选择而不会丢失选择颜色？

Question

我使用select标签创建了一个多选列表框,如下面Angular 5中的代码所示.

<select multiple id="MySelect">
      <option>I am Option 1</option>
      <option>I am Option 2</option>
      <option>I am Option 3</option>
      <option>I am Option 4</option>
      <option>I am Option 5</option>
      <option>I am Option 6</option>
      <option>I am Option 7</option>
      <option>I am Option 8</option>
      <option>I am Option 9</option>
    </select>

现在,问题是我可以将鼠标拖到选择框上而不选择任何实际选项,因为它看起来像下面的图像.

从该图像中,可以得出结论,在此列表框中选择了所有前三个选项,但实际情况并非如此.要删除此拖动功能,我添加上的mousedown和鼠标移动事件的preventDefault()函数提到这里.

添加preventDefault()修复了这个问题,但又出现了另一个问题.问题是,在列表框中选择一个或多个选项时,所选选项的背景颜色为灰色而不是默认蓝色,当我在Chrome中检查时,它显示:

select:-internal-list-box option:checked {
    background-color: -internal-inactive-list-box-selection;
    color: -internal-inactive-list-box-selection-text;
}

为了覆盖这种颜色,我使用了!important和颜色名称,但没有用.

有人可以告诉我解决这个问题的有效方法是什么,以便禁用拖动选择并且所选项目的颜色为蓝色？如果不可能,那么有人可以告诉我在Angular中使用替代组件的替代组件吗？

Answer 1

经过你所有的场景之后你需要的是@DG将CSS添加到它自己的特定组件,因为你没有提供任何代码,我将CSS应用于HTML元素.

在我的解决方案中,我没有解释为了防止多重选择,因为你已经实现了它,我专注于问题的第二部分.

CSS:

select option:hover, 
select option:focus, 
select option:active, 
select option:checked
{
    background: linear-gradient(#f48024,#f48024);
    background-color: #f48024 !important; /* for Internet exolorer */
}

DEMO

select option:hover, 
select option:focus, 
select option:active, 
select option:checked
{
    background: linear-gradient(#f48024,#f48024);
    background-color: #f48024 !important; /* for Internet exolorer */
}

<select multiple id="MySelect">
    <option>I am Option 1</option>
    <option>I am Option 2</option>
    <option>I am Option 3</option>
    <option>I am Option 4</option>
    <option>I am Option 5</option>
    <option>I am Option 6</option>
    <option>I am Option 7</option>
    <option>I am Option 8</option>
    <option>I am Option 9</option>
</select>