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
}

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

1 个答案: