Esküvő

jQuery Select CSS Style

jQuery Select CSS Style

This brilliant jQuery plugin hides all select elements and creates fake select elements which can be customized with CSS styling. The original script is written by Scott Darby.  I added an onClick event, and changed the stylesheet to make it nicer and responsive.

HTML markup

This is just a regular select element with a few options.

<select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
</select>

jQuery

Add jQuery and Stylish Select plugin.
Initialize the plugin for all Select elements, set a maximum height in case there is a long list.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.stylish-select.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('select').sSelect({ddMaxHeight: '300px'});
});
</script>

CSS

<style type="text/css">
/**
* Stylish Select 0.4.9 - $ plugin to replace a select drop down box with a stylable unordered list
* http://github.com/scottdarby/Stylish-Select/
* 
* Copyright (c) 2009 Scott Darby
* 
* Requires: jQuery 1.3 or newer
* 
* Dual licensed under the MIT and GPL licenses.
*/

/* Set border and padding values moved inward */
*{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;	
}

/* Hide lists on page load */
.stylish-select .SSContainerDivWrapper {
	left:-9999px;
}

/* Container */
.stylish-select .SSContainerDivWrapper {
	margin-top:2px;
	padding:0;
	width:100%;
	position:absolute;
	top:22px;
	left:0;
	z-index:2;
}

/* UL */
.stylish-select ul.newList {
	margin:0;
	padding:0;
	list-style:none;
	color:#000;
	background:#fff;
	border:none;
	outline:1px solid #ccc;
	overflow:auto;
}
.stylish-select ul.newList * {
	margin:0;
	list-style:none;
}
.stylish-select ul.newList a {
	color: #000;
	text-decoration:none;
	display:block;
	padding:3px 8px;
}
.stylish-select ul.newList li a:focus {
	-moz-outline-style: none;
}

/* Default fake select container style*/
.stylish-select .newListSelected {
	width:100%;
	color:#000;
	height:24px;
	padding:1px 0 0 8px;
	float:left;
	border:1px solid #CCC;
	background:#FFF url(select.jpg) top right no-repeat;
}
.stylish-select .selectedTxt {
	width:100%;
	overflow:hidden;
	height:22px;
	padding:0;
}

/* Option Highlight */
.stylish-select .highLite {
	background:#CCC!important;
	color:#000!important;
}

/* Option Hover */
.stylish-select .newListHover {
	background:#CCC!important;
	color:#000!important;
	cursor:default;
}

/* Disabled */
.stylish-select .newListDisabled {
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
}
.stylish-select .newListItemDisabled {
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
}
.stylish-select .newListOptionDisabled {
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
}

/* select Hover, Focus */
.stylish-select .newListSelHover, .stylish-select .newListSelFocus {
	background:#FFF url(img/select.jpg) center right no-repeat;
	cursor:default;
}

/* select onClick */
.stylish-select .newListSelClick{
	background:#FFF url(select.jpg) top right no-repeat;
	cursor:default;
}

/* Optgroup */
.stylish-select .newListOptionTitle {
	font-weight:bold;
	text-indent:5px;
}
.stylish-select .newListOptionTitle ul {
	margin:0;
	padding:0;
}
.stylish-select .newListOptionTitle li {
	font-weight:normal;	
}
</style>

Image

This image are required for the script, download them.

jQuery Select CSS Style 

 

Demo »Download »


Esküvő


Related articles

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.

Pie Chart with Flot jQuery Plugin

Pie Chart with Flot jQuery Plugin

28/02/2013

Learn how to use the pie plugin for Flot charts.


Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the flower *


Find us on Facebook

Tags

Esküvő

Back to Top