CODEWITHSUNDEEP
jqueryjquery-ui
John Zumbrum
John Zumbrum

Reputation: 2856

Select Box with just the CSS styling similar to Jquery UI Button

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?

Upvotes: 3

Views: 27460

Answers (2)

ryan0
ryan0

Reputation: 1525

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

Upvotes: 5

Moin Zaman
Moin Zaman

Reputation: 25455

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

Upvotes: 6

Related Questions