Adelaide Web Design

Posted by Paul Purczel on August 1st, 2008 | Comments

Adelaide Web Designs Releases customselect with icons

After being sick of how ugly select boxes are within forms, I looked hard to find a decent solution. There are a few but some of them I found to have bugs, or not be able to use icons within the custom select box as I would like.

It was necessary to have it able to degrade to the regular select box when a user does not use javascript, and from what I’ve seen i have achieved that also.

It is still in its early stages and I will tweak it some more when i get the chance, but let me know what you think.

Just include the jquery and jquery.customselect in your head, and include your custom styles.
<script src="../scripts/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="../scripts/jquery.customselect.js" type="text/javascript"></script>
Then make a call for the customselect
<script type="text/javascript">// <![CDATA[ $(document).ready(function() { $(\\\\\'#customselector\\\\\').customSelect(); }) // ]]></script>

Lastly put in the select box with a few minor variations.

If you want to check out an example or download the zip file then go to Ace Web Design

Update : New version released 3rd November 2011. It should support multiple instances. Please test, and let me know if everyone can get it working now.

Thanks for the support.

About Paul Purczel

I am a web developer who specializes in using Zend Framework, Jquery with a high focus on marketing and social media.

32 Comments to “Adelaide Web Designs Releases customselect with icons”

Peter said:

On August 13th, 2008 at 9:22 am

when i open this selectbox in safari, then the last item is listed two times??? not in FF. what can i do against this bug?

Form Elements: 40+ CSS/JS Styling and Functionality Techniques said:

On August 18th, 2008 at 3:02 pm

[…] 41-Custom Select boxes with jquery – A working example of a jquery custom select box with icons. Check out the demo here […]

Paul said:

On August 18th, 2008 at 3:59 pm

@ Peter
I just took a look at this. I’m not really sure why this would have occurred.
I did use this on another web site and didn’t have the same problem.
I did make a couple of small tweaks while I was at it though.
Will release updated version soon.

thanks for letting me know.

JJ said:

On August 18th, 2008 at 4:51 pm

Hi, I have the same problem as peter on safari. Also, is it possible to close the select box when clicking outside of the select list (ie.. click anywhere else on the page and the div collapses?)

Form elements 40 css js styling and functionality techniques said:

On August 18th, 2008 at 4:58 pm

[…] 41-Custom Select boxes with jquery – A working example of a jquery custom select box with icons. Check out the demo here […]

40 Adet Css Template ve E?itimi | said:

On August 18th, 2008 at 10:29 pm

[…] 41-Custom Select boxes with jquery – A working example of a jquery custom select box with icons. Check out the demo here […]

40 Elementos interesantes para tus formularios | Edgar Granados said:

On August 20th, 2008 at 7:19 am

[…] 41-Custom Select boxes with jquery […]

Paul said:

On August 28th, 2008 at 6:14 am

@Peter
I just worked out that the problem was the id’s i set in the demo.
Can’t have an id beginning with an integer. Needs to begin with a letter.
Once I changed it it worked well in safari.

Paul said:

On August 28th, 2008 at 6:18 am

Also updated the example and the zip download now. thanks for pointing this out.

PlugIM.com said:

On August 28th, 2008 at 3:16 pm

Jquery Plugin Custom select with icons…

Jquery Plugin Custom select with icons. Easy to use, and stylish looking drop down select menus….

S A N D E E P [ I N D I A N I C ] » Blog Archive » Form Elements: 40+ CSS/JS Styling and Functionality Techniques said:

On September 1st, 2008 at 2:59 am

[…] 41-Custom Select boxes with jquery – A working example of a jquery custom select box with icons. Check out the demo here […]

Khan said:

On September 3rd, 2008 at 11:33 am

@Paul

Thanks for coming up with the custom select box, it helped me a lot with one of my project, but I am a bit stuck now. Can you please guide me how to get this select box ‘selected’. I mean when a user makes a selection and I store that value in db, for later editing currently it just shows the customer box’s tile like “Please choose an icon”, not the previous selection. I have tried using the standar ‘Selected’ attribute in options and also putting a value of icon in select box’s title, but coud’nt get it working. Please help me out, coz either I have the custom select box with this option or not at all.

Thanks again!

Paul said:

On September 3rd, 2008 at 12:27 pm

Khan,
for some reason, I hadnt thought that far, but shouldnt be too hard to implement though. Just about to head off to bed, will take a look in the next couple of days though.
Great to hear you like the script.

Khan said:

On September 5th, 2008 at 8:55 am

Thanks Paul! I am looking forward to it and will keep trying on my own too.

Paul said:

On September 11th, 2008 at 3:28 am

Sorry about the delay, I’ve been held up with some other projects, but will get back to this as soon as I can

Khan said:

On September 12th, 2008 at 9:17 am

Thanks Paul! Still waiting for it…..

Paul said:

On September 15th, 2008 at 7:43 am

ok i did some more work on it. Its not 100% how i would like it, but it may suit your needs better though.

http://www.acewebdesign.com.au/downloads/jquery.customselect-0.2.js
is the newer version, which will populate with a preselected option.
Only thing that I found is a problem, is that you will not be able to have a message such as “please select” unless you insert a blank item with an icon.

I may work more on this at a later date, but very busy at the moment. let me know if this suits you better.
thanks

Khan said:

On September 17th, 2008 at 7:59 am

Paul,
I tried it but it didn’t work for me. Actually now it shows a missing image on selected icon. Do I have to make changes to selected icon’s url etc?

Many thanks for your time and efforts.

David said:

On September 19th, 2008 at 8:32 am

I’ve have made some modifications to your script, adding the possibility to have more select and more customization for each select, you can find it here: http://www.ildavid.com/dblog/selectcustomizer/

Form Elements: 40+ CSS/JS Styling and Functionality Techniques « HMV.co.in said:

On September 22nd, 2008 at 6:41 pm

[…] 41-Custom Select boxes with jquery – A working example of a jquery custom select box with icons. Check out the demo here […]

Jon said:

On January 19th, 2009 at 4:42 pm

Paul,
This Script Rocks!!
With a little tweaking I have now created the dropdown menu like Firefox uses at the top right of their browser (with just the image showing of the selected when the page loads, and image and name when choosing an option)!!! Nice!!! Im sure I tweaked inefficiently, but I used you .02 version that loads the preselected option, put a .replace(“Option Name”) after the – thisTitle = … and later down the script another .replace() at – var thisselection = … This allows me to only show the image in the select view just like FireFox does in their drop down search options. Thought the script works great I do have a question. I there a better way to remove every selected word other than thisTitle = $(this).html().replace(“Users”, “”).replace(“Music”, “”); ??? Cause if you have a lot of options that can be a long object chain. (I suck at javascript !!) Also when my page loads it will show the original css for the select box for a spit second. Is that my local host or is it supposed to do that?
Any way if you want more traffic to this script I would tout that you have created a FireFox like search drop down, cause I couldnt find one anywhere.

Thanks!!!!

Boomer said:

On February 12th, 2009 at 9:50 pm

I am trying to add an onchange action to the select box, which doesn’t seem to be firing… Any suggestions on how to get that working?

Thanks.

jQuery Plugin: Custom Styled Select Input w/Keyboard Interaction | dBlog.com.au said:

On March 17th, 2009 at 11:58 pm

[…] did however manage to find a reasonable good custom select over at http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons (even happened to be a fellow aussie!). It wasn’t perfect and it wouldn’t allow for […]

Dean said:

On March 18th, 2009 at 12:53 am

I have also made some more changes to David’s version that allow for keyboard navigation and the ability to click off the styled select just like a regular select.
You can check it out and grab the code over at http://dblog.com.au/general/jquery-plugin-custom-styled-select-input-wkeyboard-interaction/

Cheers,
Dean (@bigclick_dean)

deny rachmadi said:

On March 20th, 2009 at 10:01 am

Thanks’ paul. it all works …
except like’s JJ said, extra functionality must be add so it will work like regular select menu. when clicked outside the select must hidden again.
it’s all paul , thanks you for this great script. keep it clean and simple, that’s nice

David OBrien said:

On April 6th, 2009 at 5:27 pm

I’m try to replicate the following select box (The Version 1.0 One) @ http://www.linksysbycisco.com/US/en/support/NAS200/download

on my own site and am having trouble… Do you think your libaray would help accomplish this?

24 HTML Form Elements Customization Techniques | NetWaver said:

On April 17th, 2009 at 10:53 am

[…] 3.) Custom Select With Icons […]

alina said:

On September 13th, 2010 at 3:13 pm

hi,

great js, used it without problems, works even in that crappy ie6. but only for one selectbox, and i need two selectboxes on the same page. what can i do?

Maria said:

On October 12th, 2010 at 9:41 am

The plugin doesn’t work for multiple instances of the dropdown on the same page.
For instance, if I have two selects, (with different ids, ofcourse) on the same page and I initialize the plugin, it doesn’t work as expected.

Gavin said:

On November 2nd, 2010 at 4:43 pm

Hi, this is the first select form script I have found that is simple, to the point but also really easy to customise in minutes.
I’m stuck with only one thing, not sure if others have come across this? But i can’t seem to add a second dropdown/ select menu. It just reverts to a normal browser looking select option. But the original stays the same. If I edit the script in the tags and duplicate the call function with giving it a different ID it styles fine but then neither work?
Am I missing something simple here to enable more than 1 selects on one webpage?
thanks

Paul said:

On November 3rd, 2010 at 1:26 am

I’ve now set up a new version of this script, which from what I’ve tested will now support multiple instances. Basically the biggest changes are, that I put a wrapper around each instance. Then I changed it from relying on id’s to classes. The only thing i can see though, that may cause issues, is that each select item will need a different id.
Please test, and let me know if this is what you were after.
Thanks everyone for the great comments.