Disable highlighting in an HTML SELECT box

Question

I have a select box, <select multiple=true, that the user populates with values via a Picklist mechanism. I would like to disable highlighting in this box because, by definition, the values in this box are the selection.

Just to clarify, I am NOT referring to text selection, which is what ::selection operates on. I'm talking about the usually blue highlighting that the browser applies to selected line item(s) when the user clicks on them.

I'm not worried about the user blindly clicking around, because I am auto-selecting all items onsubmit so that all the values get sent.

Answer 1

Make it disabled?

<select disabled="disabled">

This would gray it out, unfortunately- the other option might be some javascript to unselect any selections.

Answer 2

If I'm reading you correctly, it sounds like you're using an accumulator model where you have a "source" box (or list or select or something) and a "selected" box. Rather than accumulating into a [select], maybe use a div? If you must use a select, you could try disabling it, but that carries other visual baggage. You could also try styling the select color, but that's definitely not going to be cross-browser.

Answer 3

if i understand you correctly, the user does not actually selects the items? then why not either disable it or if customer still interacts with it, you might need to go with some JS code to help yourself

Answer 4

Why not just list the items in their own div instead of a select element? You aren't having the users interact with them anyway, right?

Then, you can have a select element w/ all the values you want, but make it hidden via CSS so that the user won't ever see them. It'll just be there in your form so that you can grab those values on your submit.