Question

我试图“欺骗”选择框的设计以充当嵌入式选项卡/小部件。

经过一些研究，我知道很难用CSS进行修改。但是我认为这可能是可以解决的。

因此，根据代码段，当我单击选项时，文本将变为白色。只有单击一些空白后，文本才会变成黑色。为什么会这样以及如何解决？

第二，如何删除右侧箭头栏的东西？我在登台站点上运行了此CSS，chrome没有显示箭头栏，但是mozilla了。

select {
  width: 100%;
  padding: 0;
  border: none;
  background-image: none;
  font-size: 16px;
  color: #868686;
}

select option {
  display: inline;
  float: left;
  margin-right: 128px;
}

select option:hover {
  cursor: pointer;
}

select option:checked {
  background: linear-gradient(#fff, #fff);
  background-color: #ffffff !important;
  /* for IE */
  color: #000000 !important;
  font-weight: 600;
}

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

Answer 1

需要使用这种简单的方法。

请删除此CSS

Route

来自background: linear-gradient(#fff, #fff); background-color: #ffffff !important;

或者需要隐藏滚动条，然后可以将select option:checked添加到overflow: auto;

让我知道进一步的澄清

select

  select {
  width: 100%;
  padding: 0;
  border: none;
  background-image: none;
  font-size: 16px;
  color: #868686;
      overflow: auto;
}

select option {
  display: inline;
  float: left;
  margin-right: 128px;
}

select option:hover {
  cursor: pointer;
}

select option:checked {
    color: #000000;
    font-weight: 600;
    outline: none;
}

使用CSS修改选择元素

1 个答案: