Question

如何为Chrome和Safari添加自定义CSS选择框样式？有没有修复？

Answer 1

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

任何建议？

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

在JSFiddle上试用删除并在Google Chrome中添加该样式：

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

<强>后： - http://jsfiddle.net/JoshSalway/cMbTB/

select{
  -webkit-appearance: none;
}

Answer 2

<强>＆LT;选择＆GT;标签是顽固的生物，但是的一种方式。

如果有＆＃34;尺寸＆＃34;标签中的参数，几乎所有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/

希望这有帮助！

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

2 个答案: