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

您可以在CSS中完成此操作，而不是在javascript中完成

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）。另外，您可以模拟透明性，为background-color标签赋予相同的option：

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>

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

3 个答案: