PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Styling Select/Drop Down Form Elements

  1. Hey there,
    So I'm trying to style the drop down select element on a form. I'm attempting to do this with jQuery, using the selectmenu script. So far, I'm not having any luck.

    Here's a form with some dropdowns I wish to style; http://bit.ly/JbNy6f
    Here's the script I'm attempting to use: http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

    I feel that I've gone through the steps to set everything up properly. Obviously jQuery is included and I also included jQuery UI

    <!-- jQuery UI Include -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <!-- jQuery Selectmenu Include -->
    <script type="text/javascript" src="http://buddingculture.com/wp-content/themes/budding-culture/js/jquery.ui.selectmenu.js"></script>
    	<script type="text/javascript">
    		jQuery('select#input_4_2').selectmenu({style:'dropdown'});
    	</script>

    When calling the script for the element, I've used just 'select', #input_4_2 etc. I'm just not sure what else is going on. I really need another pair of eyes to help me knock this out.

    Thanks.

    Posted 12 years ago on Tuesday May 1, 2012 | Permalink
  2. Rather than going this route, have you tried just enabling the built-in "enable enhanced user interface" option on the drop down in the formbuilder?

    Posted 12 years ago on Tuesday May 1, 2012 | Permalink