How to disable the drag selection on multi select without losing the selection color?

Question

I created a multiple select list box using the select tag as shown in the code below in 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>

Now, the problem is that I can drag the mouse over the select box without selecting any option in actual as it will look like the image below.

From this image, one can conclude that all the first three options are selected in this list box but this is not the case in actual. To remove this dragging functionality, I added the preventDefault() function on mousedown and mousemove events as mentioned here.

Adding preventDefault() fixed this problem, but arised another problem. The problem was that on selecting one or more options in the list box, the background color of the selected option was gray instead of the default blue and when I inspected it in Chrome, it showed:

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

To override this color, I used the !important along with the color-name but it was of no use.

Can someone please tell me what is the effective way to fix this problem in such a way that dragging selection will be disabled and the selected item's color will be blue? In case, if it is not possible, then can anyone please tell me an alternative component to use instead of this in Angular?

Answer 1

@DG after going through all your Scenarios what you need is to add the CSS to the particular component it self as you didn't provided me with any code , I'm giving the CSS applied to HTML elements.

In my solution I didn't explaining to prevent the multiple select as you already achieved it , I'm focusing on the second part of your problem.

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>

Answer 2

You need to track the mouseup only after there was a mousedown and a mousemove actions. This will be triggered only for a drag therefore allowing also multiple selections.

Snippet Here: 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]);
    }
});