How to disable drag and drop selection in multiple selection without losing selection color?

Question

I created a multiple choice 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 selection field without actually selecting any option, since it will look like the image below.

From this image we can conclude that all three of the first parameters are selected in this list, but this is not so. To remove this drag and drop function, I added the preventDefault () function to the mousedown and mousemove events, as mentioned here .

Adding preventDefault () fixed this problem, but another problem arose. The problem was that when selecting one or more parameters in the list box, the background color of the selected option was gray and not blue by default, and when I examined 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 importance along with the color name, but it was useless.

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

Answer 1

@DG, after going through all your scripts, you need to add CSS to a specific component, since you have not provided me any code, I am applying CSS to the HTML elements.

In my decision, I did not explain, to prevent multiple choice, as you have already achieved it, I focus 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 mouseup only after mousedown and mousemove . This will only work for drag and drop, which will also allow you to use several options.

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