Custom Select Elements and jQuery… uhhh, and you.
Posted on July 6th, 2010 in Javascript, Programming | No Comments »
For those out there in the web design world with particular clients, you may have noticed it’s difficult if not impossible to modify certain CSS properties of the select tag. Hence, I have decided to get rid of it entirely in lieu of div’s. I’m aware that this has been done before. However, other instances of this script are incredibly complex, and I just don’t have the time to sort through all that junk. Here’s how this bad boy works:
Create a select tag just like you normally would except add a class called “custom_select”. Add styles to the select tag that you would like to have (even if they aren’t supported) like this:
<select class="custom_select" style="border: 1px solid #fff; height: 25px; width: 400px; padding: 2px; margin: 2px;" name="favorite_color"> <option>Blue</option> <option>Red</option> <option>Yellow</option> </select>
Now that we’ve created our select box, add this code to the top of your page.
Here’s the code, feel free to use it or post something better:
<script type="javascript"> $(document).ready(function() { custom_selects = new Array(); count = 0; $('.custom_select').each(function() { custom_selects[count] = new Array(); // Array of all selects custom_selects[count][0] = $(this); custom_selects[count][1] = $(this).attr('name'); custom_selects[count][2] = new Array(); custom_selects[count][2][0] = $(this).css('height'); custom_selects[count][2][1] = $(this).css('width'); custom_selects[count][2][2] = $(this).css('margin-top'); custom_selects[count][2][3] = $(this).css('margin-right'); custom_selects[count][2][4] = $(this).css('margin-bottom'); custom_selects[count][2][5] = $(this).css('margin-left'); custom_selects[count][2][6] = $(this).css('border-bottom-style'); custom_selects[count][2][7] = $(this).css('border-bottom-width'); custom_selects[count][2][8] = $(this).css('border-bottom-color'); custom_selects[count][2][9] = $(this).css('padding-top'); custom_selects[count][2][10] = $(this).css('padding-right'); custom_selects[count][2][11] = $(this).css('padding-bottom'); custom_selects[count][2][12] = $(this).css('padding-left'); custom_selects[count][2][13] = $(this).css('background-color'); custom_selects[count][4] = new Array(); // Array of selects options custom_selects[count][4][0] = new Array(); // option value custom_selects[count][4][1] = new Array(); // option text custom_selects[count][5] = new Array(); custom_selects[count][5][0] = $("option:selected", this).val(); custom_selects[count][5][1] = $("option:selected", this).text(); option_count = 0; $("option", this).each(function() { custom_selects[count][4][0][option_count] = $(this).val(); custom_selects[count][4][1][option_count] = $(this).text(); option_count++; }); count++; }); for (count = 0; count < custom_selects.length; count++) { // For each select // Generate the intial div $("<div id='" + custom_selects[count][1] + "_all' class='custom_select_new' hiddeninput='" + custom_selects[count][1] + "' style='background-image:url(/images/custom_select_icon.png);background-position:right;background-repeat:no-repeat;height:" + custom_selects[count][2][0] + ";width:" + custom_selects[count][2][1] + ";margin-top:" + custom_selects[count][2][2] + ";margin-right:" + custom_selects[count][2][3] + ";margin-bottom:" + custom_selects[count][2][4] + ";margin-left:" + custom_selects[count][2][5] + ";border-style:" + custom_selects[count][2][6] + ";border-width:" + custom_selects[count][2][7] + ";border-color:" + custom_selects[count][2][8] + ";padding-top:" + custom_selects[count][2][9] + ";padding-right:" + custom_selects[count][2][10] + ";padding-bottom:" + custom_selects[count][2][11] + ";padding-left:" + custom_selects[count][2][12] + ";background-color:" + custom_selects[count][2][13] + ";overflow:hidden;'></div>").insertBefore(custom_selects[count][0]); $("<input type='hidden' id='" + custom_selects[count][1] + "' name='" + custom_selects[count][1] + "' value='" + custom_selects[count][5][0] + "' />").insertBefore(custom_selects[count][0]); // Insert the already selected option $("#" + custom_selects[count][1] + "_all").append("<div class='selected' selectedvalue='" + custom_selects[count][5][0] + "'>" + custom_selects[count][5][1] + "</div>"); // Create the drop down div $("<div id='" + custom_selects[count][1] + "_all_options' class='custom_select_new_options' selectname='" + custom_selects[count][1] + "_all' style='display:none;position:absolute;overflow:auto;margin-top:" + ($("#" + custom_selects[count][1] + "_all").offset().top + $("#" + custom_selects[count][1] + "_all").height()) + "px;margin-left:" + ($("#" + custom_selects[count][1] + "_all").offset().left) + "px;width:" + custom_selects[count][2][1] + ";border-style:" + custom_selects[count][2][6] + ";border-width:" + custom_selects[count][2][7] + ";padding-top:" + custom_selects[count][2][9] + ";padding-right:" + custom_selects[count][2][10] + ";padding-bottom:" + custom_selects[count][2][11] + ";padding-left:" + custom_selects[count][2][12] + ";border-color:" + custom_selects[count][2][8] + ";background-color:" + custom_selects[count][2][13] + ";'></div>").insertBefore(custom_selects[count][0]); for (option_count = 0; option_count < custom_selects[count][4][0].length; option_count++) { if (custom_selects[count][4][0][option_count] != "") $("#" + custom_selects[count][1] + "_all_options").append("<div class='option' optionvalue='" + custom_selects[count][4][0][option_count] + "'>" + custom_selects[count][4][1][option_count] + "</div>"); } } $('.custom_select').remove(); $(".option").live('click', function() { var parent = $("#" + $(this).parent().attr('selectname')); $(".selected", parent).attr('selectedvalue', $(this).attr('optionvalue')); $(".selected", parent).text($(this).text()); $("#" + $(parent).attr('hiddeninput')).val($(this).attr('optionvalue')); }); $(".custom_select_new").live('click', function() { if ($("#" + $(this).attr('id') + "_options").is(":visible")) { $("#" + $(this).attr('id') + "_options").scrollTop(0); $("#" + $(this).attr('id') + "_options").slideUp('fast'); } else { if ($("#" + $(this).attr('id') + "_options").height() <= 250) { slideHeight = $("#" + $(this).attr('id') + "_options").height(); } else { slideHeight = 250; } $("#" + $(this).attr('id') + "_options").animate({ height:slideHeight }, 500, 'swing'); } }); $(".custom_select_new_options").live('click', function() { if ($(this).is(":visible")) { $(this).scrollTop(0); $(this).slideUp('fast'); } else { if ($(this).height() <= 250) { slideHeight = $(this).height(); } else { slideHeight = 250; } $(this).animate({ height:slideHeight }, 500, 'swing'); } }); }); </script>
Great! So now we’ve created our select and added the code above to the head tag of our site. What’s next? Nothing! Try it out. The code above copies most (I was a little lazy to be honest) of your select element’s CSS styles over to a div and then it creates a hidden input to store the div’s selection into.
Enjoy!
P.S. I know, I know… I could’ve made this tweak and that tweak to make this better. However, I only created this to address my client’s needs so if you need something else, write it yourself or hire me 
