Answers for "select tag background color"

how to change select box option hover background color .

/*with a little bit of styling and javascript, you can have a select box with coloured options*/
/*Note that size attribute = 2 or greater plays an important role here*/
<style>
select option:checked {
  background: #ff9500 -webkit-linear-gradient(bottom, #ff9500 0%, #ff9500 100%);
}
select option:hover {
  background: #ff9500 -webkit-linear-gradient(bottom, #ff9500 0%, #ff9500 100%);
  color: #fff;
}
select option {
  padding: 8px;
}
select {
  z-index: 1800; 
  position: absolute; 
  background: #fff; 
  height: 33px; 
  overflow: hidden; 
  width: 30%;
  outline: none;
}
</style>

<select id="colored_select" size="2" onclick="select_option()">
  <option value="" selected>Select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>  
  <option value="4">Four</option>                    
  <option value="5">Five</option>                    
  <option value="6">Six</option>                    
  <option value="7">Seven</option>                    
  <option value="8">Eight</option>                    
</select>

<script>
 function select_option(){
    var selectBox = document.getElementById("colored_select");
    $size = selectBox.size;
    $set_size = 4;
    if ($size == $set_size) {
      selectBox.size = 2;
      selectBox.style.overflow = 'hidden';
    } else {
      selectBox.size = $set_size;
      selectBox.style.height = 'auto';
      selectBox.style.overflow = 'auto';
    }
    var selectedOptionTop = selectBox.options[selectBox.selectedIndex].offsetTop;
    selectBox.scrollTop = selectedOptionTop;
  }
</script>

html select option text color

<style>
  #selector{
  color:red;
	}
</style>

<select name="" id="selector">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

change background color with user option

<form action="" method="post">

<select name="Color">
	<option value="White">White</option>
	<option value="Red">Red</option>
	<option value="Green">Green</option>
	<option value="Blue">Blue</option>
	<option value="Pink">Pink</option>
	<option value="Yellow">Yellow</option>
</select>

<input type="submit" name="submit" value="Get Selected Values" />

</form>
<?php

if(isset($_POST['submit'])){

	$selected_val = $_POST['Color'];  // Storing Selected Value In Variable
	echo "<style>body{background-color:".$selected_val.";}</style>";  // Displaying Selected Value

}

?>