html - 在 CSS/HTML（无 javascript）中设置选择菜单的样式时，我有哪些选项？

Question

我想<select>只使用 HTML 和 CSS 设置菜单样式 - 我可以设置哪些部分以及如何设置？

我只是想上传一张图片......不能因为我的声誉低于 10。ANYWHO -

<div class="menu-style">
    <select class="dropdown" style="position: absolute; display:block; width:100%; padding: 10px 10px 10px 20px; opacity: 0;color: #fff;border: none; background: #9f4504;">
        <option>Project 2</option>
        <option>Project 3</option>
        <option>Project 4</option>
    </select>
    <div class="selected-item" style="display:block; font-weight: bold;color: #fff;padding: 10px 10px 10px 20px; width:100%;">Selected Project</div>
</div>
<ul class="nav-list" style="width: 100%; display: block; ">
    <li style="display: block;padding: 10px 10px 10px 20px;cursor: pointer;color: #fff;">Overview</li>
    <li style="display: block;padding: 10px 10px 10px 20px;cursor: pointer;color: #fff;">Reports</li>
    <li style="display: block;padding: 10px 10px 10px 20px;cursor: pointer;color: #fff;">Schedule</li>
    <li style="display: block;padding: 10px 10px 10px 20px;cursor: pointer;color: #fff;">Forms</li>
</ul>  

我也有一些悬停元素。

Answer 1

你有没有尝试过或做过任何搜索？

说真的......快速搜索：http ://bavotasan.com/2011/style-select-box-using-only-css/

这是一个示例，但您在 Web 上还有许多其他示例。开始玩这个：

<select>
    <option>Here is the first option</option>
    <option>The second option</option>
</select>

select {
    background: transparent;
    width: 268px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    height: 34px;
}