下拉选择框无法使用自定义 CSS 正确显示？答案

【问题标题】：Dropdown Select Box not showing correctly with custom CSS?下拉选择框无法使用自定义 CSS 正确显示？
【发布时间】：2013-04-05 01:15:45
【问题描述】：

如何为 Chrome 和 Safari 添加自定义 CSS 选择框样式？有解决办法吗？

【问题讨论】：

标签： css forms google-chrome safari webkit

【解决方案1】：

回答：您需要添加 -webkit-appearance: none;以及 Chrome 和 Safari 的高度值。

有什么建议吗？

资源： http://bavotasan.com/2011/style-select-box-using-only-css/

在 JSFiddle Remove 上试用它并在 Google Chrome 中添加该样式：

之前： - http://jsfiddle.net/JoshSalway/jw6Qy/

之后： - http://jsfiddle.net/JoshSalway/cMbTB/

select{
  -webkit-appearance: none;
}

【讨论】：

您是否在谷歌搜索之前发布了您的问题？
@metadept 实际上我在 Google 上找到了它，感谢您的评论。实际添加问题以帮助开发者您看。

【解决方案2】：

如果标签中有“大小”参数，则几乎所有 CSS 都会适用。使用这种技术，我创建了一个实际上等同于普通选择标记的小提琴，并且可以像可视语言中的 ComboBox 一样手动编辑该值（除非您将 readonly 放在输入标记中）。

所以这里有一个小例子来了解背后的原理：
（你需要 jQuery 来实现点击机制）：

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

        </select>
    </span>
</div>

这里有更多样式的小提琴： https://jsfiddle.net/dkellner/7ac9us70/

希望这会有所帮助！

【讨论】：