locked
<option> with background color, could I change the color when it is hover?

    Question

  • For option tag if I give it different background color for each option item

    for example:

    <select class="select" title="Select one">
    <option style="background-color: blue">blue</option>
    <option style="background-color: green">green</option>
    <option style="background-color: pink">pink</option>
    </select>

    And when the option item is hover or checked the item's color would change to blue.

    Is that possible not change the color? just keep the original option's background color?

    OR when I hover the option, it just show the frame of option and change color.

    Thanks!

    Thursday, March 14, 2013 9:33 AM

Answers

  • Hi, Yanping

    Thanks for replying!

    However it still could not keep the original background color,

    as a result I use menu component to implement it.

    Monday, March 18, 2013 3:28 AM

All replies

  • Hi Stacy,

    I am sorry.  I do not understand what you are trying to do.

    Do you simply want to set a hover color?  hover: blue

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, March 14, 2013 10:55 AM
    Moderator
  • Hi Jeff,

    Sorry for not describe very clearly.

    I set the style of background color for options in javascript code and then set the hover style in CSS file,

    however it does not work in CSS's style.

    Thank You!

    Friday, March 15, 2013 1:35 AM
  • Hi StacyChung,

    I am not sure how to keep the original option's background color. but using the following style you can custom option's hover style.

    <style>
            ::selection, select:focus::-ms-value {
                background-color: gray;
                color: orange;
            }
    
    
            /*
    Option control color
    */
            option:checked {
                background-color: greenyellow;
                color: greenyellow;
            }
    
                option:checked:hover, select:focus option:checked:hover {
                    background-color: darkgoldenrod;
                    color: darkgoldenrod;
                }
        </style>

    Quickstart: styling controls (Windows Store apps using JavaScript and HTML) (Windows)

    http://msdn.microsoft.com/library/windows/apps/Hh465498

    The sample in the following link shows how to use CSS to customize an app's look, or brand it, by restyling text, backgrounds, and controls. It also shows how to dynamically change the active style sheet. please refer: http://code.msdn.microsoft.com/windowsapps/App-Branding-sample-9f87b7a2

    Hope this helps, thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    Friday, March 15, 2013 7:12 AM
    Moderator
  • Hi, Yanping

    Thanks for replying!

    However it still could not keep the original background color,

    as a result I use menu component to implement it.

    Monday, March 18, 2013 3:28 AM