Blue highlight persisting on option text in select input after clicking away

Question

I have a simple form with some select options that need to do stuff when the options are changed (create new form elements). This all works fine, however when a select option is chosen and the user clicks elsewhere on the page (either another form option or a blank area of the page) the text of the chosen option remains highlighted blue.

I've used select's before and not had this problem, however they weren't linked to the .change function. Is that something to do with why this is happening? Has anybody encountered this issue before? All help greaty appreciated! Code is below...

<div id="container1" class="form-group">
    <label class="control-label">Select an option</label>
    <div>
        <select class="form-control" id="mySelect">
            <optgroup label="A">
                <option value="1A">Option1A</option>
                <option value="2A">Option2A</option>
                <option value="3A">Option3A</option>
                <option value="4A">Option4A</option>
            </optgroup>
            <optgroup label="B">
                <option value="1B">Option1B</option>
                <option value="2B">Option2B</option>
                <option value="3B">Option3B</option>
                <option value="4B">Option4B</option>
            </optgroup>
        </select>
    </div>
</div>

I've seen the issue brought up here

Remove Blue highlighting of option

However I don't think this quite describes my problem, as it seems to me that that person wants to remove the blue highlighting whilst using the form (hard to be 100% sure though). I don't mind the blue highlighting being there when using the form, I just want it to stop persisting when you stop using the form and do something else on the page.

UPDATE: Problem only seems to occur in Internet Explorer (tested versions 9, 10 and 11). Tested in Chrome and issue doesn't occur. Just to elaborate on the comments, the issue has nothing to do with JS (so I have removed the JQuery code and subsequent tags). The issue occurs when using optgroups in a select form. Loading the HTML outlined above into IE produces the error.

This may help : [Prevent blue highlighting of elements](https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic) — Jeremy Thille, Aug 17 '17 at 06:44
`$("#mySelect").change(function() { this.blur(); });` ? (this is a chrome specific problem, right?) — Jaromanda X, Aug 17 '17 at 06:49
No, I need it to work in IE9. Tried your solution @Jeremy Thille but no luck :( — , Aug 17 '17 at 06:52
@JaromandaX that solution removes the border highlighting but not the text weirdly. — , Aug 17 '17 at 06:54
I've edited your codes into a snippet, but it does not reproduce the behaviour you are seeing. I hope I didn't do wrong? — Salketer, Aug 17 '17 at 07:02
No you've done it correct, its actually my fault. I've tried to simplify my HTML for a few reasons, the main being that its quite complex and that it is all created programatically on page load. I've done some messing with it and managed to replicate the issue when I use optgroups, so it must be something to do with that. When the HTML includes optgroups, the issue occurs. When I remove them, it works just fine (as in your snippet). Iv updated my question with new HTML, however it is working fine. But I can confirm that this exact same code is definitely having the issue in IE9 — , Aug 17 '17 at 07:24
So just to clarify, if I load the above example into a page in IE9 the issue occurs. If I comment out or remove all the optgroup tags in the HTML, the issue goes away. Not sure if its some syntax error with my optgroup HTML tags or not? — , Aug 17 '17 at 07:31
In fact, all you need to do is load the HTML into IE9 to replicate the issue. Has nothing to do with the JS — , Aug 17 '17 at 07:39

Blue highlight persisting on option text in select input after clicking away

0 Answers0