3

I can use .button() to create beautiful submit buttons, but the rest of the elements on my page, most notably select boxes are still in the regular, ugly css styling.

Is there a way to hijack the css styling from Jquery UI Button for my select boxes?

John Zumbrum
  • 2,786
  • 8
  • 36
  • 60

2 Answers2

6

Not completely no. Select / dropdown boxes are generally Operating System and Browser dependent. You can't control it at a fine grained level.

Chrome / Webkit browsers allow some styling. See this Question: How to style a <select> dropdown with CSS only without JavaScript?

If you are able to use extra markup to surround the select then you can do some things.

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

Otherwise you have to resort to JS solutions like

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

and

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

Community
  • 1
  • 1
Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
5

Using jquery-ui 1.10.2, assuming you have already downloaded and installed a nice theme from 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>

Works in Chrome and Safari...

ryan0
  • 1,482
  • 16
  • 21
  • That's a very interesting approach; departure from commonly recognized select list style, but could perhaps work. – John Zumbrum Apr 22 '13 at 22:44
  • I was struggling with this for a while and could not find a simple solution, and I'm not sure if this gives you the full stylability of a button, but it definitely looks MUCH better with the ui-darkness theme I'm currently using. You can probably get the results you are looking for by experimenting with jQuery-UI's menu() widget – ryan0 Apr 24 '13 at 15:13