下拉选择框未正确显示自定义CSS？

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

回答： 您需要添加-webkit外观：无；以及Chrome和Safari的高度值

有什么建议吗

资源：

在JSFIDLE上尝试删除并在Google Chrome中添加该样式：

之前： -

之后： -

标签是顽固的生物，但总有办法。

如果标签中有一个“size”参数，那么几乎所有CSS都将应用。使用这种技术，我创建了一个实际上相当于普通select标记的fiddle，并且可以像可视化语言中的组合框一样手动编辑该值（除非在输入标记中添加readonly）

这里有一个简单的例子来说明背后的原理：
（单击机制需要jQuery）：

/*只有这两条线是真正需要的*/
.span{位置：相对；}
.style选择{位置：绝对；左侧：0px；显示：无}
/*现在你可以把它们设计出来了*/
.style输入{…}
.选择{…}
.style选项{…}
.optgroup{…}
...
选择你的超级英雄：


甘道夫
哈利·波特
乔恩斯诺
托尼·斯塔克
史蒂文·罗杰斯
娜塔莎·罗曼诺娃

以下是更多风格的小提琴：

---

希望这有帮助

你在谷歌搜索之前发布了你的问题吗？@metadept实际上我是在谷歌上找到的，谢谢你的评论。实际上添加这个问题是为了帮助开发人员。

select{
  -webkit-appearance: none;
}

<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>