I came across this problem with a select menu, it's about styling it with the help of CSS & Jquery. By now, I managed to get this result, which I really like it:
到目前为止,它在 mozilla、opera、chrome、IE7+ 上都能完美运行。
这是我目前拥有的来源:
HTML:
<select class="styled" name="">
<option>Select title</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Miss.</option>
</select>
CSS:
select {
border: 1px solid #d6d8db;
background-color: #ecedee;
text-transform: uppercase;
color: #47515c;
padding: 12px 10px 12px 10px;
width: auto;
cursor: pointer;
margin-bottom: 10px;
}
select > option {
text-transform: uppercase;
padding: 5px 0px;
}
.customSelect {
border: 1px solid #d6d8db;
background-color: #ecedee;
text-transform: uppercase;
color: #47515c;
padding: 12px 10px 12px 10px;
margin-bottom: 10px;
}
.customSelect.changed {
background-color: #f0dea4;
}
.customSelectInner {
background:url(../images/select_arrows.png) no-repeat center right;
}
jQuery 由两部分组成:
- 插件
- 和控制代码
这可以在我刚刚创建的 FIDDLE 中查看:http://jsfiddle.net/s6jGW/1/ http://jsfiddle.net/s6jGW/1/
请注意左侧有“外部资源”。
我想要实现什么
The drop down I want to style it so that it will look approximately like in the image (I mean those options like - height - padding - on hover:
我不希望“选择标题”作为选择选项,它必须只是选择框的标题。在此小提琴中,您也可以看到它也是一个选项。http://jsfiddle.net/s6jGW/1/ http://jsfiddle.net/s6jGW/1/
也许最重要的是,我正在寻找跨浏览器解决方案。
先感谢您
为跨浏览器功能设置选择菜单样式的正确方法
放弃吧,没有跨浏览器的方式来设置选择和选项元素的样式。您需要将它们替换为您自己的基于 HTML 的控件。
但是,如果您想坚持(并且可能放弃旧版浏览器),以下链接可能会有所帮助:
-
如何仅使用 CSS 而不使用 JavaScript 来设置 下拉菜单的样式? https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript
-
设计或替换标准选择元素 https://stackoverflow.com/questions/7321261/styling-or-replacing-the-standard-select-element.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)