jquery - 仅使用类似于 Jquery UI Button 的 CSS 样式选择 Box

Question

我可以使用 .button() 创建漂亮的提交按钮，但我页面上的其余元素，尤其是选择框仍然是常规的、丑陋的 css 样式。

有没有办法为我的选择框劫持 Jquery UI Button 的 css 样式？

Answer 1

不完全没有。选择/下拉框通常取决于操作系统和浏览器。您无法在细粒度级别上对其进行控制。

Chrome / Webkit 浏览器允许一些样式。请参阅此问题：如何在没有 JavaScript 的情况下仅使用 CSS 设置 <select> 下拉菜单的样式？

如果您能够使用额外的标记来包围，select那么您可以做一些事情。

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

否则，您必须求助于 JS 解决方案，例如

http://cssglobe.com/post/8802/custom-styling-of-the-select-elements

和

http://www.htmlgoodies.com/beyond/css/how-to-create-custom-select-menus-with-css.html

Answer 2

使用 jquery-ui 1.10.2，假设您已经从 themeroller 下载并安装了一个不错的主题：

<select id="myselect">
  <option> Option 1 </option>
  <option> Option 2 </option>
  <option> Option 3 </option>
  <option> Option 4 </option>
</select>

<script type="text/javascript">
  $("#myselect").menu();
</script>

适用于 Chrome 和 Safari...