如何为 Chrome 和 Safari 添加自定义 CSS 选择框样式?有解决办法吗?
问问题
1063 次
2 回答
0
答:需要加上 -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;
}
于 2013-04-05T01:15:45.090 回答
0
<select> 标签是顽固的生物,但有办法。
如果标签中有“大小”参数,则几乎所有 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/
希望这可以帮助!
于 2016-06-12T12:12:26.087 回答