html - 如何使用 CSS 自定义选择下拉框？

Question

我已经尝试了一些不同的东西，但都没有用，我想让这个下拉选项列表在悬停时在其后面显示灰色，但是我得到的只是默认的蓝色背景悬停时的白色文本。HTML:

<select placeholder="Category">
    <option value="AllOpt">All</option>
    <option value="AntiquesOpt">Antiques</option>
    <option value="ArtsCraftsOpt">Art &amp; Crafts</option>
</select>

CSS:

.form-wrapper select { 
    position:absolute;
    width:147px;
    height:40px;
    padding:7px 5px;
    float:left;
    top:74px;
    left:963px;text-indent:3px;
    font-size:16px;
    font-family:sans-serif,arial;
    border:2px solid #f9f9f9;
    background:#f9f9f9;
    font-weight:bold;
    color:dodgerblue;
} .form-wrapper select:focus { 
    outline:0;
    background:#f9f9f9;
    color:dodgerblue;
} .form-wrapper select option {
    color:black;
    font-weight:bold;
    text-overflow:none;
    padding-right:15px;
} .form-wrapper select option:hover { 
    background-color:grey;
    color:dodgerblue;
    cursor:pointer 
} .form-wrapper select option:focus { 
    background-color:lightgray;
    color:dodgerblue;
    cursor:pointer
}

谁能给我一些指导，告诉我哪里出了问题，以及我该如何取得结果？

Answer 1

将类定义移动到 select 标记中(您可能需要重命名它或将其完全变成另一个类)。

<select placeholder="Category" class="form-wrapper">
    <option value="AllOpt">All</option>
    <option value="AntiquesOpt">Antiques</option>
    <option value="ArtsCraftsOpt">Art &amp; Crafts</option>
</select>

交换 html 元素和 CSS 类，例如select.form-wrapper 而不是 .form-wapper select

select.form-wrapper { 
    position:absolute;
    width:147px;
    height:40px;
    padding:7px 5px;
    float:left;
    top:74px;
    left:963px;text-indent:3px;
    font-size:16px;
    font-family:sans-serif,arial;
    border:2px solid #f9f9f9;
    background:#f9f9f9;
    font-weight:bold;
    color:dodgerblue;
}
select.form-wrapper:focus { 
    outline:0;
    background:#f9f9f9;
    color:dodgerblue;
} 
select option {
    color:black;
    font-weight:bold;
    text-overflow:none;
    padding-right:15px;
} 
select.form-wrapper option:hover { 
    background-color:grey;
    color:dodgerblue;
    cursor:pointer 
}  select.form-wrapper option:focus { 
    background-color:lightgray;
    color:dodgerblue;
    cursor:pointer
}