Click here to Skip to main content
15,905,232 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
When I am using as like this..
XML
<select id="Category_DD" runat="server" >

<option>All</option>
<option>School</option>
<option>College</option>
<option>StudentProducts</option>
<option>Bus</option>
<option>Personal Care</option>

</select>

When selecting Item selected item background color change to blue color.Now I want to this should not be happen.Please help me to solve this problem..
Posted
Updated 11-Oct-12 21:46pm
v2
Comments
vyas_pratik20 12-Oct-12 2:56am    
in which browser this happen
This may be default behavior of browser

1 solution

XML
<html>
<head>
<style type="text/css">
option.red {background-color:red}
option.blue {background-color:blue}
option.white {background-color:white}
</style>
</head>

<select>
<option value="item 1" class="red">Item 1</option>
<option value="item 2" class="blue">Item 2</option>
<option value="item 3" class="white">Item 3</option>
</select>
</html>


or

You'll need some JavaScript for it to work in other browsers:
HTML
<select onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> 
    <option style="background-color:yellow">Item 1</option> 
    <option style="background-color:lightyellow">Item 2</option> 
</select> 

Even nicer with css class names:
HTML
<select>
    onchange="this.className=this.options[this.selectedIndex].className" 
    class="important"> 
    <option class="important" selected="selected">Item 1</option> 
    <option class="sorta-important">Item 2</option> 
</select> 

And your css:

CSS
.important { background-color:yellow; } 
.sorta-important { background-color:lightyellow; } 
 
Share this answer
 
Comments
ridoy 12-Oct-12 3:51am    
+5

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900