# Custom HTML Drop Downs
**URL:** https://forum.kirupa.com/t/custom-html-drop-downs/263983
**Category:** open source
**Created:** [June 21, 2008, 12:36pm UTC](https://forum.kirupa.com/t/custom-html-drop-downs/263983 "2008-06-21T12:36:48Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@evildrummer](https://forum.kirupa.com/u/evildrummer)
#### Post date: [June 21, 2008, 12:36pm UTC](https://forum.kirupa.com/t/custom-html-drop-downs/263983/1 "2008-06-21T12:36:48Z")
**UPDATED**
_Finished abstracting this as a plugin for jQuery so most of below is useless and I’ll edit in bit, look for post below for new code and demo_
I’ve just been experimenting with a way of making custom HTML drop downs. Thought it would be a cool thing to be able to style the way the drop downs look completely with CSS.
This is just a really rough demo using jQuery, I’m going to abstract it into a jQuery plugin so you can use stuff like:
```auto
$('select').jdropdown({ selectedClass: 'selected', openEffect: 'show', closeEffect: 'slideUp'});
```
which would turn all drop downs on the page into custom ones with open and close effects and the selected item has the class selected.
Oh and when I say a rough demo I mean really really rough, bad CSS, a mess of JS. But it’s functional, I’ve left the old dropdown visible, and you can see that by changing the old one the new custom one auto updates.
[http://demos.stuartloxton.com/customdropdown/](http://demos.stuartloxton.com/customdropdown/)
---
### Author:  [@jimhere](https://forum.kirupa.com/u/jimhere)
#### Post date: [June 21, 2008, 1:39pm UTC](https://forum.kirupa.com/t/custom-html-drop-downs/263983/2 "2008-06-21T13:39:39Z")
Interesting. I’m always looking for css dropdowns that work across browsers. Does this work in IE6 (I’m on an Apple machine)?
---
### Author:  [@evildrummer](https://forum.kirupa.com/u/evildrummer)
#### Post date: [June 21, 2008, 1:48pm UTC](https://forum.kirupa.com/t/custom-html-drop-downs/263983/3 "2008-06-21T13:48:14Z")
^ Not really tested much, works fine in both FF3, IE7 & IE8.
The CSS doesn’t work in IE though, but that’s not the important thing.
---
### Author:  [@evildrummer](https://forum.kirupa.com/u/evildrummer)
#### Post date: [June 22, 2008, 2:58am UTC](https://forum.kirupa.com/t/custom-html-drop-downs/263983/4 "2008-06-22T02:58:40Z")
**Update**
Here is the abstracted plugin for jQuery.
Demo: [http://demos.stuartloxton.com/customdropdown/dev.html](http://demos.stuartloxton.com/customdropdown/dev.html)
_(Again, I’ve left the original drop down visible so you can see that changing one changes the other)_
I’m still styling the example so sorry if you catch me mid-change.
It’s all abstracted so there is no page specific code, just a simple
```auto
$('#dropdown').jdropdown();
```
You can have as many of these on the page as you want, each one with custom styles which I’ll try and make a demo of tomorow.
**Source Code**
```auto
jdropdownSettings = {
class: "",
selectedClass: 'selected',
openLabel: '>',
closeLabel: '<'
}
jQuery.fn.jdropdown = function() {
console.log(jQuery(this));
if (jQuery(this).attr('id') == "undefined") {
i = jQuery('.jdropdown').length + 1;
id = 'jdropdown-'+i;
} else {
id = jQuery(this).attr('id');
}
jQuery(this).attr('id', id+'Old');
jQuery(this).addClass('jdropdownOld');
jQuery(this).after('')
if(jQuery(this).find('option:selected').length == 0) {
i = 0;
jQuery(this).find('option').each(function() {
if(i == 0) {
jQuery('#'+id+' ul').append(''+jQuery(this).text()+'');
i++;
} else {
jQuery('#'+id+' ul').append(''+jQuery(this).text()+'');
}
});
} else {
jQuery(this).find('option').each(function() {
if(jQuery(this).attr("value") == jQuery(this).parent().find('option:selected').attr("value")) {
jQuery('#'+id+' ul').append(''+jQuery(this).text()+'');
} else {
jQuery('#'+id+' ul').append(''+jQuery(this).text()+'');
}
});
}
jQuery('#'+id+' ul li:not(.'+jdropdownSettings.selectedClass+')').css('display', 'none');
jdropdownBind()
}
function jdropdownBind() {
jQuery('.jdropdown a.openTrigger').click(function() {
rel = jQuery(this).attr('rel');
text = jQuery(this).text();
jQuery(this).attr('rel', text);
jQuery(this).text(rel);
if(jQuery(this).parent().hasClass('closed')) {
jQuery(this).next().find('li').css('display', 'block');
jQuery(this).parent().removeClass('closed');
jQuery(this).parent().addClass('open');
} else {
jQuery(this).next().find('li:not(.'+jdropdownSettings.selectedClass+')').css('display', 'none');
jQuery(this).parent().removeClass('open');
jQuery(this).parent().addClass('closed');
}
});
jQuery('.jdropdown ul li a').click(function() {
id = jQuery(this).parent().parent().parent().attr("id");
old = id+'Old';
value = jQuery(this).attr('rel');
jQuery(this).parent().parent().find('li.'+jdropdownSettings.selectedClass).removeClass('selected');
jQuery(this).parent().addClass(jdropdownSettings.selectedClass);
jQuery('#'+old).find("option[value='"+value+"']").attr("selected", "selected");
if(jQuery(this).parent().parent().parent().hasClass('open')) {
jQuery(this).parent().parent().prev().click();
} else {
jQuery(this).parent().parent().find('li:not(.'+jdropdownSettings.selectedClass+')').css('display', 'none');
jQuery(this).parent().css('display', 'block');
}
return false;
});
jQuery('.jdropdownOld').change(function() {
old = jQuery(this).attr("id");
jdropdown = old.replace(/Old$/, '');
value = jQuery(this).find('option:selected').attr("value");
console.log(value);
jQuery('#'+jdropdown+" ul li a[rel='"+value+"']").click();
});
}
```
---
### Author:  [@Esherido](https://forum.kirupa.com/u/Esherido)
#### Post date: [June 22, 2008, 12:28pm UTC](https://forum.kirupa.com/t/custom-html-drop-downs/263983/5 "2008-06-22T12:28:26Z")
Nice, I feel special because I got a sneak preview of this. 😃