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

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 ...