jQuery Custom Select: Create select inputs that can be styled

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 153 All time: 327 This week: 2Up
Version License JavaScript version Categories
jquerycustomselect 1.0BSD License5jQuery, Forms
Description 

Author

Martin Barker

This is a jQuery plugin that can create select inputs that can be styled.

It takes a given select input that creates a separate div element that emulates select inputs using custom select style properties.

The original select input is hidden but its selected values are updated when the custom select input selected option is updated.

Innovation Award
JavaScript Programming Innovation award winner
February 2017
Winner

Prize: One ebook of choice by Packt		 Form select inputs are very useful to let the users select options from a list but they are also limited in the way you can style their presentation.

This jQuery plugin provides an alternative solution that consists in recreating page elements that work like a select input, but can be styled in many ways.

It just copies the initial attributes and values of an existing select input that becomes hidden and synchronizes the selected options, so the form value submission works well as before.

Manuel Lemos
Picture of Martin Barker
  Performance   Level  
Name: Martin Barker <contact>
Classes: 10 packages by
Country: United Kingdom

Level 3 StarStarStar

 Innovation award
Innovation award
Nominee: 6x

Winner: 4x

Example

<!DOCTYPE html>
<html>
	<head>
		<title>Unload Event Test</title>
		<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="jQuery.CustomSelect.js"></script>
		<link rel="stylesheet" type="text/css" href="jQuery.CustomSelect.css"></script>
		<script type="text/javascript">
			$(function(){
				$("#testSelect").CustomSelect();
			});
		</script>
	</head>
	<body>
		<select id="testSelect" name="test">
			<option value="1">test</option>
			<option value="2">test 2</option>
			<option value="3">test 3</option>
			<option value="4">test 4</option>
			<option value="5">test 5</option>
			<option value="6">test 6</option>
			<option value="7" selected="selected">test 7</option>
			<option value="8">test 8</option>
			<option value="9">test 9</option>
			<option value="10">test 10</option>
			<option value="11">test 11</option>
			<option value="florida">Florida</option>
		</select>
	</body>
</html>

  Files folder image Files (3)  
File Role Description
Accessible without login Plain text file example.html Example Example of Usage
Accessible without login Plain text file jQuery.CustomSelect.css Data Style sheet
Plain text file jQuery.CustomSelect.js Class Class File

Downloadjquerycustomselect-2017-01-06.zip 2KB
Downloadjquerycustomselect-2017-01-06.tar.gz 1KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:153
This week:0
All time:327
This week:2Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.