Question

我可以使用.button（）来创建漂亮的提交按钮，但是我页面上的其他元素，最明显的选择框仍然是常规的，丑陋的CSS样式。

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

Answer 1

并非完全没有。选择/下拉框通常取决于操作系统和浏览器。你无法在细粒度的水平上控制它。

Chrome / Webkit浏览器允许一些样式。请参阅此问题：How to style a <select> dropdown with CSS only without JavaScript?

如果你能够使用额外的标记围绕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 ......

选择Box只有类似于Jquery UI Button的CSS样式

2 个答案: