Hi,

I was looking for a way to skin my select form...finally I decide to create my own plugin. This plugin is not finish yet but I'll give you the first part of this plugin because I don't know when I'll finish this. For now, It produces same thing than other plugin like that. Your select form is replace by a div + ul li to simulate a select Box with options and rebuild automatically your original <select> with the correct value.

Don't work with multiple selections.

Screenshot 01 CSF jquery plugin

Demo

Requirement :

  • jQuery 1.4 or later

CrossBrowsing :

  • Working on FF, Safari, Chrome, IE7+

Activate the plugin :

$(document).ready(function(){
 
  $('#myCustomSelect').customSelectForm({
              prefix:"csf", // add a prefix to elements ClassName 
              icon:false // using icon TRUE/FALSE
  });
 
});

Functionalities :

  • Standart functionalities of simple <select>
  • using title attribute of <option> to set the icon path

Coming soon (or not):

  • posibility to highlight your selectBox with a mask that cover entire screen.

Download :

All files are fully commented

Last Update : 30/10/2010

Denis P.