javascript изменить выбрать вариант цвет фона выпадающий

Question

javascript изменить выбрать вариант цвет фона выпадающий

1

Я пытаюсь изменить цвет фона на прозрачный по опции выбора HTML, но, похоже, он не меняет цвет выпадающего меню. Кто-нибудь знает, почему?

READ ME: Я только хочу сделать это с 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>

HotFuzz 14 окт. 2018, в 18:37

Источник

0

@DavidThomas Это формат для шестнадцатеричных цветов RGBA. Вы можете прочитать об этом в проекте спецификации . Хотя это черновик, Firefox, Chrome и Safari все поддерживают его .
Heretic Monkey 14 окт. 2018, в 16:40

Теги:

javascript

3 ответа

Ещё вопросы

@DavidThomas Это формат для шестнадцатеричных цветов RGBA. Вы можете прочитать об этом в проекте спецификации . Хотя это черновик, Firefox, Chrome и Safari все поддерживают его .

Ram Segev · Answer 1 · 2018-10-14T15-14-00.000Z

Вы не можете изменить фон опции на прозрачный, но вы можете изменить его так же, как цвет фона тела, используя вычисленный стиль

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>

Commercial Suicide · Answer 2 · 2018-10-14T13-54-00.000Z

В настоящее время тег option не поддерживает цвета и прозрачность rgba (см. qaru.site/questions/799925/...). В качестве альтернативы вы можете имитировать прозрачность, дающую тот же 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 должен быть настраиваемым.

brk · Answer 3 · 2018-10-14T13-26-00.000Z

Вместо того, чтобы делать это в 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>

спасибо, но я пытаюсь сделать это только с помощью JavaScript