I've got an HTML select box that I need to style. I'd prefer to use just CSS but if I have to I'll use jQuery to fill in the gaps.
Can anyone recommend a good tutorial or plugin?
I know, Google, but I've been searching for the last two hours and I'm not finding anything that meets my needs.
It needs to be:
Does anyone know anything that will meet my needs?
I've seen some jQuery plugins out there that convert <select>'s to <ol>'s and <option>'s to <li>'s, so that you can style it with CSS. Couldn't be too hard to roll your own.
Here's one: https://gist.github.com/1139558 (Used to he here, but it looks like the site is down.)
Use it like this:
$('#myselectbox').selectbox();
Style it like this:
div.selectbox-wrapper ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.selectbox-wrapper ul li.selected {
background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current {
background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
cursor:pointer;
}
Update: As of 2013 the two I've seen that are worth checking are:
Yeah!
As of 2012 one of the most lightweight, flexible solutions I've found is ddSlick. Relevant (edited) info from the site:
select optionsAnd here's a preview of the various modes:
As for CSS, Mozilla seems to be the most friendly, especially from FF 3.5+. Webkit browsers mostly just do their own thing, and ignore any style. IE is very limited, though IE8 lets you at least style border color/width.
The following actually looks fairly nice in FF 3.5+ (picking your color preference, of course):
select {
-moz-border-radius: 4px;
-moz-box-shadow: 1px 1px 5px #cfcfcf inset;
border: 1px solid #cfcfcf;
vertical-align: middle;
background-color: transparent;
}
option {
background-color: #fef5e6;
border-bottom: 1px solid #ebdac0;
border-right: 1px solid #d6bb86;
border-left: 1px solid #d6bb86;
}
option:hover {
cursor: pointer;
}
But when it comes to IE, you have to disable the background color on the option if you don't want it to display when the option menu isn't pulled down. And, as I said, webkit does its own thing.
We've found a simple and decent way to do this. It's cross-browser,degradable, and doesn't break a form post. First set the select box's opacity to 0.
.select {
opacity : 0;
width: 200px;
height: 15px;
}
<select class='select'>
<option value='foo'>bar</option>
</select>
this is so you can still click on it
Then make div with the same dimensions as the select box. The div should lay under the select box as the background. Use { position: absolute } and z-index to achieve this.
.div {
width: 200px;
height: 15px;
position: absolute;
z-index: 0;
}
<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
<option value='foo'>bar</option>
</select>
Update the div's innerHTML with javascript. Easypeasy with jQuery:
$('.select').click(function(event)) {
$('.div').html($('.select option:selected').val());
}
That's it! Just style your div instead of the select box. I haven't tested the above code so you'll probably need tweak it. But hopefully you get the gist.
I think this solution beats {-webkit-appearance: none;}. What browsers should do at the very most is dictate interaction with form elements, but definitely not how their initially displayed on the page as that breaks site design.
Here's a little plug if you mostly want to
select elementoptions, proper zindex, etc)ul, li generated markupsThen jquery.yaselect.js could be a better fit. Simply:
$('select').yaselect();
And the final markup is:
<div class="yaselect-wrap">
<div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
<!-- your option tags -->
</select>
Check it out on github.com
You can style to some degree with CSS by itself
select {
background: red;
border: 2px solid pink;
}
But this is entirely up to the browser. Some browsers are stubborn.
However, this will only get you so far, and it doesn't always look very good. For complete control, you'll need to replace a select via jQuery with a widget of your own that emulates the functionality of a select box. Ensure that when JS is disabled, a normal select box is in its place. This allows more users to use your form, and it helps with accessibility.
Most of the browsers doesn't support customizing of select tag using css. But I find this javascript which can be used to style select tag. But as usual no support for IE browsers.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ I noticed an error on this that Onchange attribute dosen't work
I just found this which seems really good.
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
If have a solution without jQuery. A link where you can see a working example: http://www.letmaier.com/_selectbox/select_general_code.html (styled with more css)
The style-section of my solution:
<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a { color: #333333; text-decoration: none; }
#container ul li { padding: 3px; padding-left: 0px; border-bottom: 1px solid #aaa; font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>
Now the HTML-code inside the body-tag:
<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
<li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
<li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
<li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>
Updated for 2014: You don't need jQuery for this. You can fully style a select box without jQuery using StyleSelect. Eg, given the following select box:
<select class="demo">
<option value="value1">Label 1</option>
<option value="value2" selected>Label 2</option>
<option value="value3">Label 3</option>
</select>
Running styleSelect('select.demo') would create a styled select box as follows:
this on uses the twitter-bootstrap styles to turn selectin dropdown menu
https://github.com/silviomoreto/bootstrap-select
Simple solution is Warp your select box inside a div, and style the div matching your design. Set opacity:0 to select box, it will make the select box invisible. Insert a span tag with jQuery and change its value dynamically if user change drop down value. Total demonstration shown in this tutorial with code explanation. Hope it will solve your problem.
JQuery Code looks like similar to this.
<script>
$(document).ready(function(){
$('.dropdown_menu').each(function(){
var baseData = $(this).find("select option:selected").html();
$(this).prepend("<span>" + baseData + "</span>");
});
$(".dropdown_menu select").change(function(e){
var nodeOne = $(this).val();
var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
$(this).parents(".dropdown_menu").find("span").text(currentNode);
});
});
</script>
selectelements cross-browser. But if people are willing to live with the differences, you can style them – including the borders. – PointedEars