0

I am new in css, so excuse me if my question is too simple. I have an ASP.NET MVC DropDownList "Reports" with this css:

  #Reports{
        border-radius: 4px;
        background-color: #eae8e8;
        height: 32px;
        color: #313131;
        width: 10.4em;
        border-style: solid;
        font-size: 1.05em;
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        background-color: #ececec;
        border-color: #c5c5c5;
    }
    #Reports option {
        border: 1px solid #e2e2e2;
        background: #e2e2e2;
        color: #333;
        font-size: 1.05em;
        margin: 5px 0 6px 0;
        padding: 5px;
        width: 300px;
    }

    #Reports option:active {
        background: orange !important;
}

When the DropDownList is active, colour is blue, not orange. What is wrong? How to write jquery to set the colour to orange? Thank you in advance for any help.

alenan2013
  • 207
  • 3
  • 22
  • Could you show some of you html? – keiv.fly Jun 24 '16 at 22:03
  • 1
    http://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover – Paul Abbott Jun 24 '16 at 22:10
  • Thank you both.@keiv.fly I am working in ASP.NET MVC razor, here is a small segment of the code: `
    @{var listItems = new List { new SelectListItem { Text = "Patient List", Value="Patient List" }, new SelectListItem { Text = "Center Specific", Value="Center Specific" }; } @Html.DropDownList("Reports",new SelectList(listItems,"Value","Text"))`
     – alenan2013 Jun 24 '16 at 23:44
  • @alenan2013 next time, please add to the original post as an edit, so it can be properly formatted. Clearly label it as an edit. Separate edit from prior content by three dashes on their own line to create a horizontal rule. – René Kåbis Jun 25 '16 at 03:49

1 Answers1

0
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#Reports').change(function () {
            $('option').css('background', 'none');
            $('option:selected').css('backgroundColor', 'orange');
        }).change()
    });
</script>
Denys Wessels
  • 16,829
  • 14
  • 80
  • 120
  • Thank you very much, it works fine for selected items. Are there any ways to set the color for active or hover items? – alenan2013 Jun 25 '16 at 15:39