Stylize your select box using JQuery custom plugin

Hi all, Now days everybody wants to make his/her website to looks better. We can do almost everything with HTML/CSS to make website looks good. But there are still some html component, which we can’t stylize using normal CSS. Like

  • We can’t change the look and feel of Select box
  • We can’t change the look and feel of Checkbox
  • We can’t change the look and feel of radio button

selectbox

Today I’ll show you, how to stylize your select box using jQuery. There are lots of jQuery script or plugin available to stylize your select box.

But those plugins are either very big in size or they doesn’t full fill your need like, they doesn’t trigger “onchange” event of select box or click event on select box.

To overcome these problems, I have made a custom small script, which will helps you to fulfill your need.

To stylize any select box, create your html file and add JQuery library on top, see below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>stylize selectbox jquery plugin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
</head>
<body>
<form name="star" method="post" action="">
  <div class="field">
    <label> What is your profession ?</label>
    <select name="orgs">
      <optgroup>Information Technology </optgroup>
      <option value="1">Software Engineer</option>
      <option value="2">Hardware Engineer</option>
      <option value="3">Web Designer</option>
      <optgroup>Other</optgroup>
      <option value="4">Teacher</option>
      <option value="5">Student</option>
      <option value="6">Custom</option>
    </select>
  </div>
</form>
</body>
</html>

Now create new javascript file “stylize.js” and copy paste following lines to that file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
(function($){
	$.fn.stylize=function(){
		this.each(function(){
		$(this).wrap("<div class='stylize'></div>");
		var str='';
			$(this).children().each(function(){
				if($(this).prop("tagName")=="optgroup" || $(this).prop("tagName")=="OPTGROUP" || $(this).prop("tagName")=="option" || $(this).prop("tagName")=="OPTION"){
					var attr = $(this).attr('value');
					var vals='';
					if (typeof attr !== 'undefined' && attr !== false) {
						vals=$(this).attr("value");
					}
					isSelected="";
					if($(this).closest(".stylize").find("select  option:selected").text() ==$(this).text()){
					isSelected=' class="selected" ';
					}
 
					if($(this).prop("tagName")=="optgroup" || $(this).prop("tagName")=="OPTGROUP"){
					str+='<li class="optgroup"><span>'+$(this).text()+'</span></li>';
					}
					else{
					str+='<li class="option"><a rel="'+vals+'" href="javascript:;"'+isSelected+' rel="nofollow">'+$(this).text()+'</a></li>';
					}
				}
			});
 
			str="<p class='selVal'>"+$(this).parent().find("select  option:selected").text()+"</p><ul class='stylizeul'>"+str+"</ul>";
			$(this).parent().append(str);
 
			$(this).closest(".stylize").find("a").click(function(){
				$(this).closest(".stylize").find("a").removeClass("selected")
				$(this).closest("div.stylize").find("select").children("option").removeAttr("selected");
				var idx=$(this).parent().index();
				$(this).addClass("selected");
				$(this).closest("div.stylize").find("select").children("option:eq("+idx+")").attr("selected","selected");
				$(this).closest("div.stylize").find("select").trigger("change");
				$(this).closest("div.stylize").find("select").trigger("click");
				$(this).closest("div.stylize").find("p.selVal").html($(this).html())
				$(this).closest("ul").slideUp();
			});
			$(this).closest("div.stylize").find("p.selVal").click(function(){
				$(this).closest("div.stylize").find("ul").slideToggle();
			});
			$(this).hide();
		});
	}
})(jQuery)

After that add these lines in html file like

1
2
3
4
5
6
<script type=”text/javascript” src=”stylize.js”></script>
<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery("select").stylize();	
	});
</script>

Now following CSS code to look your new selectbox better, like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
body{
font-family: verdana;
font-size:13px;
}
a,body{
color:#444;
}
.stylize{
width:300px;
}
.stylize p{
	width:296px;
	border:1px solid #c0c0c0;
	margin:0px;
	padding:5px 2px;
	background: #f2f5f6; /* Old browsers */
	background: -moz-linear-gradient(top,  #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
	cursor:pointer;
}
.stylize ul{
	list-style:none;
	margin:0;
	display:none;
	padding:0;
 
}
.stylize ul li{
	border:1px solid #ccc;
	margin:1px;
	font-weight:bold;
	background: #f9fcf7; /* Old browsers */
	background: -moz-linear-gradient(top,  #f9fcf7 0%, #f5f9f0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9fcf7), color-stop(100%,#f5f9f0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f9fcf7 0%,#f5f9f0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 ); /* IE6-9 */
}
.stylize ul li span{
	display:block;
	padding:5px 2px;
}
.stylize ul li a{
	display:block;
	font-weight:normal;
	text-decoration:none;
 
	padding:5px 2px 5px 10px;
	background: #f9fcf7; /* Old browsers */
	background: -moz-linear-gradient(top,  #f9fcf7 0%, #f5f9f0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9fcf7), color-stop(100%,#f5f9f0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f9fcf7 0%,#f5f9f0 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f9fcf7 0%,#f5f9f0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 ); /* IE6-9 */
 
}
.stylize ul li a:hover,.stylize ul li a.selected{
	background: #fcfff4; /* Old browsers */
	background: -moz-linear-gradient(top,  #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */
	color:#111;
}
label{
	margin:5px 0px;
	display:block;
}

Now your final file will look like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>stylize selectbox jquery plugin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="stylize.js" type="text/javascript" ></script>
<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery("select").stylize();	
	});
</script>
<style type="text/css">
body {
	font-family: verdana;
	font-size: 13px;
}
a, body {
	color: #444;
}
.stylize {
	width: 300px;
}
.stylize p {
	width: 296px;
	border: 1px solid #c0c0c0;
	margin: 0px;
	padding: 5px 2px;
	background: #f2f5f6; /* Old browsers */
	background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f5f6), color-stop(37%, #e3eaed), color-stop(100%, #c8d7dc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* IE10+ */
	background: linear-gradient(to bottom, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc', GradientType=0 ); /* IE6-9 */
	cursor: pointer;
}
.stylize ul {
	list-style: none;
	margin: 0;
	display: none;
	padding: 0;
}
.stylize ul li {
	border: 1px solid #ccc;
	margin: 1px;
	font-weight: bold;
	background: #f9fcf7; /* Old browsers */
	background: -moz-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9fcf7), color-stop(100%, #f5f9f0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); /* IE10+ */
	background: linear-gradient(to bottom, #f9fcf7 0%, #f5f9f0 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0', GradientType=0 ); /* IE6-9 */
}
.stylize ul li span {
	display: block;
	padding: 5px 2px;
}
.stylize ul li a {
	display: block;
	font-weight: normal;
	text-decoration: none;
	padding: 5px 2px 5px 10px;
	background: #f9fcf7; /* Old browsers */
	background: -moz-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9fcf7), color-stop(100%, #f5f9f0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); /* IE10+ */
	background: linear-gradient(to bottom, #f9fcf7 0%, #f5f9f0 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0', GradientType=0 ); /* IE6-9 */
}
.stylize ul li a:hover, .stylize ul li a.selected {
	background: #fcfff4; /* Old browsers */
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfff4), color-stop(40%, #dfe5d7), color-stop(100%, #b3bead)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* IE10+ */
	background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0 ); /* IE6-9 */
	color: #111;
}
label {
	margin: 5px 0px;
	display: block;
}
</style>
</head>
<body>
<form name="star" method="post" action="">
  <div class="field">
    <label> What is your profession?</label>
    <select name="orgs">
      <optgroup>Information Technology </optgroup>
      <option value="1">Software Engineer</option>
      <option value="2">Hardware Engineer</option>
      <option value="3">Web Designer</option>
      <optgroup>Other</optgroup>
      <option value="4">Teacher</option>
      <option value="5">Student</option>
      <option value="6">Custom</option>
    </select>
  </div>
</form>
</body>
</html>

And your new select box will look like this

stylize_selectbox

You can customize css to looks it better. Hope this helps you lot to stylize your select box. Later I’ll post you how to stylize your checkbox and radio button

You can see demo and download source code zip below


No Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

*


Skip to toolbar