0

I am using select with some colors in jQuery but when I move the cursor I am getting a blue background color. I would like the the background color to be 'none'.

Here is my code: 

var oColor = {};
oColor['Red'] = '#FF0000';
oColor['Green'] = '#006400';
oColor['Blue'] = '#0000FF';                 
oColor['Sienna'] = '#A0522D';

$.each(oColor, function(colorName, color){
   $("#color").append("<option value='"+color+"'  style='height: 15px; background-color:"+color+"'></option>");
});  


$("#color").change(function(){
    $(this).css("background-color", $(this).val());
});  

<select class="color" id="color" name="color" style="padding:0px;">
    <option value="" >Select Color</option>
</select>
Bazzz
  • 26,427
  • 12
  • 52
  • 69
user1921361
  • 23
  • 2
  • 1
    are you sure this is all code? There is nothing in there that does anything on `mouseover` or `hover` that could make it blue. There is a change event handler though that makes the background of the select the color that was selected. – Bazzz Jan 24 '13 at 07:52
  • Seems to work just fine: http://jsfiddle.net/nY2rP/ – THEtheChad Jan 24 '13 at 08:00
  • if you mean change the light blue hover color, you can't according to these other similar questions http://stackoverflow.com/questions/7027551/how-to-change-the-color-of-the-hovered-select-option-in-firefox, http://stackoverflow.com/questions/1667086/changing-select-highlight-color – WebChemist Jan 24 '13 at 08:11
  • so is there any chance to set background color for cursor.i mean if i place cursor on red color cursor should show red but now its showing light blue – user1921361 Jan 24 '13 at 09:16
  • Hi THEtheChad, here u can see if i put cursor on any option color its showing light blue.but i dont want that..its should show same color. – user1921361 Jan 24 '13 at 09:39

2 Answers2

0

The hover over selected options is a browser functionality like the style of the arrow. You can't change it unless you write your own kind-of-select with js

Ria Weyprecht
  • 1,275
  • 9
  • 19
0

If I'm understanding your question correctly, when you click on the select and choose which option you want, that blue background on each option when mouseover is not changeable. That is OS/browser specific implementation for the select element, not CSS. Once you select an option then the CSS you defined is applied.

If you want to have a consistent look for your select, look into using some jQuery dropdown plugin where select

SeanLi
  • 194
  • 2