Solved

How to change background color in a select list?

Posted on 2010-09-21
8
571 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:Steggs
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 200 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 30

Assisted Solution

by:Steggs
Steggs earned 50 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:Steggs
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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

738 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