Question

由于chrome（和其他浏览器？）存在问题，无法在多项选择中设置text的样式。

这是我的意思的示例：

单击某个项目时，突出显示的背景为蓝色，颜色为白色。 white text颜色无法通过CSS更改。

查看示例：

<select multiple>
<option>test</option>
<option>test2</option>
<option>test3</option>

但是，我已经开始为此进行JS解决。

我目前仍受此代码限制（非JS示例）：

select[multiple]:focus option:checked {
  background: white linear-gradient(0deg, white 0%, white 100%);
  outline: none!important;
}

select[multiple]:focus option {
  background: white linear-gradient(0deg, white 0%, white 100%);
}

select[multiple] option {
  background: white linear-gradient(0deg, white 0%, white 100%);
}


/* turns off highlighting of the box completely */

select:active,
select:hover,
select:focus-within,
select:focus {
  outline: none;
}

select {
  width: 100%;
  padding: 0;
  border: none;
  font-size: 16px;
  color: #868686;
  overflow: hidden;
  /* removes the scrollbar */
}

select option {
  display: inline;
  float: left;
  overflow: none;
}

[selected] {
  color: #000;
}

<select multiple="multiple" id="test">
  <option value="">Latest</option>
  <option value="52">New</option>
  <option value="53">Pre-Owned</option>
  <option value="115">Unworn</option>
</select>

我所做的事情：删除了selection-color（以前以蓝色突出显示）。现在，每当我click一件商品时，似乎它disappears就会变成只是白色的选择。如果您尝试click outside字段，则可以再次看到该项目。

现在，我尝试在JS中创建一个函数，该函数可以记住所选的内容，然后取消选择它，然后重新选择以前选择的内容。

我已经做了类似的事情（没有按预期工作）：

function clearSelected() {
  var elements = document.getElementById("test").options;
  var yourSelect = document.getElementById("test");
  for (var i = 0; i < elements.length; i++) {
    elements[i].selected = false;
  }
  yourSelect.selected = true;
}

select[multiple]:focus option:checked {
  background: white linear-gradient(0deg, white 0%, white 100%);
  outline: none!important;
}

select[multiple]:focus option {
  background: white linear-gradient(0deg, white 0%, white 100%);
}

select[multiple] option {
  background: white linear-gradient(0deg, white 0%, white 100%);
}


/* turns off highlighting of the box completely */

select:active,
select:hover,
select:focus-within,
select:focus {
  outline: none;
}

select {
  width: 100%;
  padding: 0;
  border: none;
  font-size: 16px;
  color: #868686;
  overflow: hidden;
  /* removes the scrollbar */
}

select option {
  display: inline;
  float: left;
  overflow: none;
}

<select multiple="multiple" id="test">
  <option value="" onclick="clearSelected();">Latest</option>
  <option value="52" onclick="clearSelected();">New</option>
  <option value="53" onclick="clearSelected();">Pre-Owned</option>
  <option value="115" onclick="clearSelected();">Unworn</option>
</select>

任何帮助将不胜感激。

记住所选选项，清除并重新选择所选内容

0 个答案: