Question

我使用.style.backgroundColor ='＃58eaa1'来更改下拉列表（）的背景颜色，但它将下拉列表的外观更改为3d。即使在更改背景颜色后，我也想要与“初始外观”相同的外观。

示例代码（html）

function changecolor(){
    var dropdownlist = document.getElementById('dropdownlist');
    dropdownlist.style.backgroundColor = 'green';
}

<!DOCTYPE html>
<html lang="en">
<script src="test.js"></script>
<body>
<div class="header">
    <select id="dropdownlist" onchange="changecolor()">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
</body>
</html>

Answer 1

这是一个有用的链接：http://plnkr.co/edit/YbKyjIMVABcF8tZxlM3Y?p=preview 这里是html：

// Code goes here

var changeBack = function (){
  // select your select tag
  var selectStatus = document.getElementById("selectStatus");
  // get the number of the option currently selected
  var optionSelected = selectStatus.selectedIndex;
  // set his background-color to the class'name of the option
  selectStatus.style.background = selectStatus.options[optionSelected].className;
  //Then color each option in her proper class
  for (var option in selectStatus.options){
    selectStatus.options[option].style.background =  selectStatus.options[option].className;
  }
};

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<!-- Just to color the select on page load -->
<body onload="changeBack()">
  <tr>
    <td>
      <form action="">
        <select id="selectStatus" onclick="changeBack()" name="statusApproved">
          <!--Set your options a class with the color you want-->
          <option class="green" value="Current:Approved">Current: Approved</option>
          <option class="red" value="ChangeTo:Rejected">Change to: Rejected</option>
        </select>
      </form>
    </td>
  </tr>
</body>

</html>

Answer 2

尝试一下，我想这会解决你的问题

<select style="background:#58eaa1 !important; border:1px solid #abadb3">
    <option>hdd</option>
</select>

Answer 3

＆＃13;

var buton=document.getElementById("dropdownlist");
var allchar="0123456789ABCDEF";

buton.addEventListener("change",myFun,true);

function myFun(){
  var  randcol= "";
for(var i=0; i<6; i++){
   randcol += allchar[Math.floor(Math.random()*16)];
}
document.getElementById("dropdownlist").style.background="#"+randcol;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<script src="test.js"></script>
<body>
<div class="header">
    <select id="dropdownlist" >
        <option class="col_color">0</option>
        <option class="col_color">1</option>
        <option class="col_color">2</option>
        <option class="col_color">3</option>
        <option class="col_color">4</option>
        <option class="col_color">5</option>
    </select>
</div>
</body>
</html>

＆＃13;

选择下拉列表背景颜色效果视图

3 个答案: