CODEWITHSUNDEEP
javascriptcss
Vijesh Kk
Vijesh Kk

Reputation: 171

select dropdown list background color effects view

I used .style.backgroundColor = '#58eaa1' to change the background color of the dropdown list () but it changes the appearance of the dropdown list to 3d. I want the same appearance as in 'initial appearance' even after the change of background color.

Initial appearance

after changing background color

Sample code (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>

Upvotes: 0

Views: 197

Answers (3)

Muhammad Usman
Muhammad Usman

Reputation: 357

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;
}
<!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>

Upvotes: 0

Lokesh thakur
Lokesh thakur

Reputation: 206

try it , i think this will solve your problem

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

Upvotes: 1

user8724413
user8724413

Reputation:

Here a working link: http://plnkr.co/edit/YbKyjIMVABcF8tZxlM3Y?p=preview here the 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>

Upvotes: 1

Related Questions