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
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 [...]
Form Elements: 40+ CSS/JS Styling and Functionality Techniques | Css Edge said:
On October 31st, 2008 at 3:21 am
[...] 41-Custom Select boxes with jquery - A working example of a jquery custom select box with icons. Check out the demo here [...]
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
24 HTML Form Elements Customization Techniques | NetWaver said:
On April 17th, 2009 at 10:53 am
[...] 3.) Custom Select With Icons [...]
24 ??????? HTML ???? said:
On April 20th, 2009 at 9:56 am
[...] 3.) Custom Select With Icons [...]