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"> $(document).ready(function() { $(\\\\\'#customselector\\\\\').customSelect(); })</script>
Lastly put in the select box with a few minor variations.
<select name="select" class="customselect" title="Choose an icon" id="customselector"> <option value="1" id="1" title="../icons/attention.gif">Attention icon</option> <option value="2" id="2" title="../icons/backward.gif">Back Icon</option> <option value="3" id="3" title="../icons/base.gif">Base Icon</option> </select>
If you want to check out an example or download the zip file then go to Ace Web Design
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?
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 […]
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.
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?)
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 […]
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 […]
on August 20th, 2008 at 7:19 am
[…] 41-Custom Select boxes with jquery […]
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.
on August 28th, 2008 at 6:18 am
Also updated the example and the zip download now. thanks for pointing this out.
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….
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 […]
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!
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.
on September 5th, 2008 at 8:55 am
Thanks Paul! I am looking forward to it and will keep trying on my own too.
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
on September 12th, 2008 at 9:17 am
Thanks Paul! Still waiting for it…..
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
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.
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/
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 […]