Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to change background color in a select list?

Posted on 2010-09-21
8
Medium Priority
?
581 Views
Last Modified: 2012-05-10
Is it possible to change the default background color from a select list in HTML, when trying to hover over the selection?
0
Comment
Question by:paulinewin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
8 Comments
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 33731160
Hello,

I just did a quick test in my browsers.

<style>
select:hover {background-color:red}
option:hover {background-color:orange}
</style>

<select><option value="1">1</option></select>

Firefox4 beta - red on hover
Chrome - red on hover
safari - red on hover
opera - red on hover
IE9 beta - no change on hover


Hope this helps
0
 

Author Comment

by:paulinewin
ID: 33731864
Thank you so much Steggs.

What I was hoping to accomplish is a bit different.  In a list such as the one below, when the user goes through all the options, the background color of each item change from white to blue to highlight the option.  I was hoping to change the blue to another color, but just one item at a time as the mouse hover over each item.  Is that possible to do?  If yes, is it fairly simple to accomplish?
<select>
      <option>item 1</option>
      <option selected="selected">item 2</option>
      <option>item 3</option>
      <option>item 4</option>
      <option>item 5</option>
      <option>item 6</option>
      <option>item 7</option>
      <option>item 8</option>
      <option>item 9</option>
</select>

Thank you!
0
 
LVL 14

Accepted Solution

by:
Dushyant Sharma earned 800 total points
ID: 33731905
I dont' think you can do this by using css. the selected option will always have default properties (blue background and white font color).

perhaps you can create a javascript based dropdown list and style it any way you like.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 30

Assisted Solution

by:Mark Steggles
Mark Steggles earned 200 total points
ID: 33731946
yeh this is not possible in css. You may want to look for a js solution, maybe something like this http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
0
 

Author Closing Comment

by:paulinewin
ID: 33732274
Thank you Steggs!  The only problem I have with the js solution is I don't know how to expand the width of the container.  It's not in the css file.
0
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 33764629
what is going on here? I don't see any authorisation from paulinewin to change the accepted answer.

Also, you don't seem to have factored in the first answer where I tested if it was possible with css at all.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question