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

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和mousemove事件中添加了preventDefault（）函数，如上所述here。

添加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 */
}

<强>样本

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>

Answer 2

只有在mouseup和mousedown操作后才需要跟踪mousemove。这将仅针对拖动触发，因此也允许多次选择。

这里的片段：https://jsfiddle.net/omartanti/nm8d52ku/

var isDragging = false;
var select = $('#MySelect');

select.mousedown(function() {
    isDragging = false;
}).mousemove(function() {
    isDragging = true;
}).mouseup(function(e) {
    var wasDragging = isDragging;

    isDragging = false;
    if (wasDragging) {
        e.preventDefault();
        var selected = select.find('option:selected');
        var values = Array.from(selected).map((el) => el.value);
        select.val(values[values.length - 1]);
    }
});