Styled.js
High performance, dependency free, cross-browser styled <select>
's
Browser support
- Chrome
- Firefox
- iOS
- Internet Explorer 6+
- Safari
- Opera
Usage
<head>
1. Include the Styled.js stylesheet at the end of your document's
</body>
tag
2. Include the Styled.js javascript at the end of your document, right before the closing If using the dependency-free version:
Or if using the Mootools version:
3. (Optional) To enable Internet Explorer 6/7 support:
Replace your document's opening <html>
tag with
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--><!--[if IE 7 ]> <html class="ie7"> <![endif]--><!--[if (gt IE 7)|!(IE)]><!--> <!--<![endif]-->
<select>
's you'd like to style:
4. Add the "styled" class to any ...
Live Demo
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--><!--[if IE 7 ]> <html class="ie7"> <![endif]--><!--[if (gt IE 7)|!(IE)]><!--> <!--<![endif]--> Styled.js Red Orange Yellow Green Blue Purple
To Do
- Unit tests
- Configurable options
- Support for checkboxes & radio buttons
License
Modify and distribute as you wish!