Quantcast
Channel: Ghan – Code Insects – Insects who Code
Viewing all articles
Browse latest Browse all 26
↧

Stylize your select box using JQuery custom plugin

August 11, 2013, 11:43 am
$
0
0

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+'>'+$(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


↧
Search
Viewing all articles
Browse latest Browse all 26

Trending Articles

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Download: FK ft Shenky – Nakuyewa ”Prod by: Shenky”

February 16, 2017, 4:24 pm

How to win at Markstrat (Markstrat Tips and Tricks) – Vodites

January 5, 2014, 10:34 pm

Ominde Commission Report and Recommendations – Ominde Report of 1964

March 16, 2015, 5:14 am

Bureau of Internal Revenue: Regional Offices (Directory)

January 9, 2014, 11:06 pm

GO 53 on Enhancement of Ex-gratia upto 5 Lakhs Toddy Tappers in Telangana

March 26, 2017, 11:23 pm

Cakewalk CA-2A Leveling Amplifier v2.0.1.97 WiN, v2.0.1.96 OSX Incl Keygen

October 17, 2016, 7:20 am

Mp3 Download: Mdu - Kunjenjenjena

December 7, 2017, 8:16 am

How the kill the job , when DTP request running for long hours.

July 26, 2013, 2:41 am

Microsoft Intune から展開しているアプリのアップデートについて

October 17, 2016, 4:11 am

18-year-old girl was beaten for half an hour by two Northampton men in 'an...

September 1, 2017, 10:00 pm

Car crash in Dunton Bassett leaves driver in critical condition

October 7, 2014, 7:51 am

Macky 2, Two Others In Road Accident

March 29, 2015, 5:34 am

Application log 00000000000000089514: Could not convert queue DLVST90CLNT

May 14, 2015, 11:27 pm

Detroit mafia: D’Anna Brothers agree to plea deal

April 21, 2016, 6:56 am

Delivery block field greyed out using VA02

January 26, 2016, 2:52 pm

Muloraki Au

June 22, 2016, 1:44 am

【個人撮影】スマホのプライベート映像♪「中に出さないで///」カラオケ屋での生ハメ撮りが流出ｗ【リベンジポルノ】＠PornHub

October 12, 2017, 2:23 pm

BREAKING NEWS: Diamond Platnumz Is Reported Dead After Ghastly Car Accident

February 9, 2018, 4:56 am

FIAT 500 B0111 B0112

July 5, 2018, 10:31 am
Search