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>