javascript更改选择选项背景颜色下拉

Question

我正在尝试将HTML选择选项上的背景颜色更改为透明，但是它似乎并未更改下拉菜单的颜色。 有人知道为什么吗？

自述文件：我只想在可能的情况下使用JavaScript。

 var Style2 = document.querySelectorAll('select'); for (var i = 0; i < Style2.length; i++) { Style2[i].style.borderRadius = '1em'; // standard Style2[i].style.MozBorderRadius = '1em'; // Mozilla Style2[i].style.WebkitBorderRadius = '1em'; // WebKitww Style2[i].style.color = "#FFFFFF"; Style2[i].style.border = "2px solid #000000"; Style2[i].style.backgroundColor = "#ffffff00"; } 

 body { background-color: #232323; } 

 <select class="className"> <option value="link.html">text here</option> <option value="link.html">text here</option> <option value="link.html">text here</option> </select> 

Answer 1

除了在javascript中进行操作外，您还可以在css中进行操作

 body { background-color: #232323; } option { color: green; border: 2px solid #000000; background: #fff; border-radius: 1em } 

 <select class="className"> <option value="link.html">text here</option> <option value="link.html">text here</option> <option value="link.html">text here</option> </select> 

Answer 2

当前， option标签还不支持rgba颜色和透明度（请参阅https://stackoverflow.com/a/17753020/6053654 ）。 或者，您可以模拟透明度，为option标签提供相同的background-color ：

 var Style2 = document.querySelectorAll('select'); for (var i = 0; i < Style2.length; i++) { Style2[i].style.borderRadius = '1em'; // standard Style2[i].style.MozBorderRadius = '1em'; // Mozilla Style2[i].style.WebkitBorderRadius = '1em'; // WebKitww Style2[i].style.color = "#FFFFFF"; Style2[i].style.border = "2px solid #000000"; Style2[i].style.backgroundColor = window.getComputedStyle(document.body).backgroundColor; } 

 body { background-color: #232323; } 

 <select class="className"> <option value="link.html">text here</option> <option value="link.html">text here</option> <option value="link.html">text here</option> </select> 

还有另一种方法：您可以使用任何可配置的插件，该插件可模拟选择/下拉行为，并且只要它不是select HTML元素， background-color应该是可配置的。

Answer 3

您不能将选项背景更改为透明，但可以使用计算样式将其更改为与主体背景颜色相同

window.getComputedStyle(document.body).backgroundColor

或使用选择父背景颜色

window.getComputedStyle(Style2[0].parentElement).backgroundColor

 var Style2 = document.querySelectorAll('select'); for (var i = 0; i < Style2.length; i++) { Style2[i].style.borderRadius = '1em'; // standard Style2[i].style.MozBorderRadius = '1em'; // Mozilla Style2[i].style.WebkitBorderRadius = '1em'; // WebKitww Style2[i].style.color = "#FFFFFF"; Style2[i].style.border = "2px solid #000000"; Style2[i].style.backgroundColor = window.getComputedStyle(Style2[0].parentElement).backgroundColor; } 

 body { background-color: #232323; } 

 <select class="className"> <option value="link.html">text here</option> <option value="link.html">text here</option> <option value="link.html">text here</option> </select>