html - 使用 CSS 修改选择元素

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

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

从 select option:checked

或者需要隐藏滚动可以在select中加入overflow: auto;

让我知道进一步的说明

  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;
}

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