使用 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相比

或者需要隐藏滚动，然后您可以将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;
}

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