选择选项后如何更改选择框的颜色 [英] How to change color of Select box after option is selected

问题描述

我尝试了很多，但不能这样做。我想在选择选项后向选择框显示红色背景颜色。

 < select& 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< / select> 
 
< style type =text / css> 
 select：hover {
 background：＃Ff0000; 
 color：#ffffff; 
} 
< / style> 
  

解决方案

尝试：

  var select = document.getElementById（'mySelect'）; select.onchange = function（）{select.className ='redText';}  / pre> 
  .redText {background-color：＃F00;}  pre> 
 < select id =mySelect> < option> 1< / option> < option> 2< / option> < option> 3< / option>< / select>  
 

I have tried a lot but can not do this. I want to show the red background colour to the selectbox after option is selected.

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<style type="text/css">
select:hover { 
    background:#Ff0000; 
    color : #ffffff;
}
</style>

解决方案

Try this:

var select = document.getElementById('mySelect');
select.onchange = function () {
    select.className = 'redText';
}

.redText {
    background-color:#F00;
}

<select id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

这篇关于选择选项后如何更改选择框的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！