我使用 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 中使用替代组件来代替这个组件?
最佳答案
@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>
关于html - 如何在不丢失选择颜色的情况下禁用多选拖动选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49166776/