Not able to change dropdown border color in IE11 when it expands

Question

I'm trying to apply border color blue to dropdown when it expands, but i'm unable to find any working css for this. Can anyone please help with this. Also when we click on drop down the options are coming above dropdown vs they should start showing below dropdown. In chrome there is no issue. Thanks in advance.

Answer 1

The dropdown above and below is typically caused by the locaion of the menu in relation to the top or bottom of the browser window.

The blue border would be written like this (in CSS): border: 1px solid #06F; There are several shades of blue, you can substitue the word blue, or use another shade. #06F is shorthand for #0066FF.

Answer 2

I think that your issue is similar to this link: How to style the <option> with only CSS?

You could add CSS style along with JS code to achieve your requirement.

I've modified the demo in the link, maybe you could refer to.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(function () {
        var opened = false;
        var select = $('select');
        select.click(function (e) {
            opened = !opened
            if (opened) {
                select.attr('size', 10);
            } else {
                select.attr('size', 1);
            }
        })
    })
</script>

<style>
    select {
        width: 10em;
        font-size: 1.5em;
        overflow-y: hidden;
        border: 2px solid blue;
    }


        select option:hover {
            position: relative;
        }

            select option:hover:after {
                right: 0;
                position: absolute;
            }
</style>

<select size=1 class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option>Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>