Change select input background from its option value by changing class name - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

Change select input background from its option value by changing class name

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.Red{<!--from  w ww .j  av a  2s. c om-->
   background-color: #ff0000;
}
.Green{
   background-color: #00ff00;
}
.Blue{
   background-color: #0000ff;
}


      </style> 
  <script type="text/javascript">

      </script> 
 </head> 
 <body> 
  <select name="select" class="Red" onchange="this.className = this.options[this.selectedIndex].className"> 
    <option class="Red" value="1">Red</option> 
    <option class="Green" value="2">Green</option> 
    <option class="Blue" value="3">Blue</option> </select> 
 </body>
</html>

Related Tutorials