Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 588
  • Last Modified:

How to change background color in a select list?

Is it possible to change the default background color from a select list in HTML, when trying to hover over the selection?
0
paulinewin
Asked:
paulinewin
  • 3
  • 2
2 Solutions
 
Mark StegglesWeb DeveloperCommented:
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
 
paulinewinAuthor Commented:
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
 
Dushyant SharmaCommented:
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Mark StegglesWeb DeveloperCommented:
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
 
paulinewinAuthor Commented:
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
 
Mark StegglesWeb DeveloperCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now