Custom Select Box CSS Style Plugin: jQuery + CSS - jQuery Snipplr Social Repository

Revision: 24547

at August 28, 2010 00:41 by adamcoulombe

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Style Select Boxes Using jQuery + CSS</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript">
(function($){
 $.fn.extend({
 
 	customStyle : function(options) {
	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
	  return this.each(function() {
	  
			var currentSelected = $(this).find(':selected');
			$(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
			var selectBoxSpan = $(this).next();
			var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));			
			var selectBoxSpanInner = selectBoxSpan.find(':first-child');
			selectBoxSpan.css({display:'inline-block'});
			selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
			var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
			$(this).height(selectBoxHeight).change(function(){
				//selectBoxSpanInner.text($(this).val()).parent().addClass('changed');
selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');
// Thanks to Juarez Filho & PaddyMurphy
			});
			
	  });
	  }
	}
 });
})(jQuery);


$(function(){

$('select').customStyle();

});
</script>

<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif }
span.customStyleSelectBox { font-size:11px; background-color: #f5f0de; color:#7c7c7c; padding:5px 7px; border:1px solid #e7dab0; -moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px 5px; }
span.customStyleSelectBox.changed { background-color: #f0dea4; }
.customStyleSelectBoxInner { background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right; }
</style>
</head>

<body>

<select class="styled">
<option>one</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>


</body>
</html>

Revision: 24546

at August 28, 2010 00:37 by adamcoulombe

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Style Select Boxes Using jQuery + CSS</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript">
(function($){
 $.fn.extend({
 
 	customStyle : function(options) {
	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
	  return this.each(function() {
	  
			var currentSelected = $(this).find(':selected');
			$(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
			var selectBoxSpan = $(this).next();
			var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));			
			var selectBoxSpanInner = selectBoxSpan.find(':first-child');
			selectBoxSpan.css({display:'inline-block'});
			selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
			var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
			$(this).height(selectBoxHeight).change(function(){
				//selectBoxSpanInner.text($(this).val()).parent().addClass('changed');
selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');
// Thanks to Juarez Filho
			});
			
	  });
	  }
	}
 });
})(jQuery);


$(function(){

$('select').customStyle();

});
</script>

<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif }
span.customStyleSelectBox { font-size:11px; background-color: #f5f0de; color:#7c7c7c; padding:5px 7px; border:1px solid #e7dab0; -moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px 5px; }
span.customStyleSelectBox.changed { background-color: #f0dea4; }
.customStyleSelectBoxInner { background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right; }
</style>
</head>

<body>

<select class="styled">
<option>one</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>


</body>
</html>

Revision: 24545

at March 3, 2010 15:04 by adamcoulombe

Initial Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Style Select Boxes Using jQuery + CSS</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript">
(function($){
 $.fn.extend({
 
 	customStyle : function(options) {
	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
	  return this.each(function() {
	  
			var currentSelected = $(this).find(':selected');
			$(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
			var selectBoxSpan = $(this).next();
			var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));			
			var selectBoxSpanInner = selectBoxSpan.find(':first-child');
			selectBoxSpan.css({display:'inline-block'});
			selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
			var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
			$(this).height(selectBoxHeight).change(function(){
				selectBoxSpanInner.text($(this).val()).parent().addClass('changed');
			});
			
	  });
	  }
	}
 });
})(jQuery);


$(function(){

$('select').customStyle();

});
</script>

<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif }
span.customStyleSelectBox { font-size:11px; background-color: #f5f0de; color:#7c7c7c; padding:5px 7px; border:1px solid #e7dab0; -moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px 5px; }
span.customStyleSelectBox.changed { background-color: #f0dea4; }
.customStyleSelectBoxInner { background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right; }
</style>
</head>

<body>

<select class="styled">
<option>one</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>


</body>
</html>

Initial URL

http://www.adamcoulombe.info/lab/jquery/select-box/

Initial Description

NOTE: THIS HAS BEEN MOVED TO GITHUB:
If you have any ideas or improvements for this script feel free to fork or contribute or discuss over there:
https://github.com/adamcoulombe/jquery.customSelect


Plugin Download: http://www.adamcoulombe.info/lab/jquery/select-box/customSelect.jquery.js. ...............Demo: http://www.adamcoulombe.info/lab/jquery/select-box/ ...............This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable SPAN element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box.

Initial Title

Custom Select Box CSS Style Plugin: jQuery + CSS

Initial Tags

form, css, javascript, plugin, style, jquery

Initial Language

jQuery

Choose a language for easy browsing: