styled.js

Styled.js

High performance, dependency free, cross-browser styled <select>'s

Browser support

Chrome
Firefox
iOS
Internet Explorer 6+
Safari
Opera

Usage

1. Include the Styled.js stylesheet at the end of your document's `<head>`

<link rel="stylesheet" type="text/css" href="stylesheets/styled.css" />

2. Include the Styled.js javascript at the end of your document, right before the closing `</body>` tag

If using the dependency-free version:

<script type="text/javascript" src="javascripts/styled.js"></script>

Or if using the Mootools version:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="javascripts/styled.mootools.js"></script>

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)]><!--> <html class=""> <!--<![endif]-->

4. Add the "styled" class to any `<select>`'s you'd like to style:

<select class="styled">
    ...
</select>

Live Demo

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
    <title>Styled.js</title>
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="language" content="en" />
 
    <link rel="stylesheet" type="text/css" href="stylesheets/styled.css" />
</head>
<body>
 
    <select class="styled">
        <option value="red">Red</option>
        <option value="orange">Orange</option>
        <option value="yellow">Yellow</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
        <option value="purple">Purple</option>
    </select>
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script> 
    <script type="text/javascript" src="javascripts/styled.mootools.js"></script> 
 
</body>
</html>

http://jsfiddle.net/Bgj5x/

To Do

Unit tests
Configurable options
Support for checkboxes & radio buttons

License

Modify and distribute as you wish!

styled.js

Styled.js

Browser support

Usage

1. Include the Styled.js stylesheet at the end of your document's `<head>`

2. Include the Styled.js javascript at the end of your document, right before the closing `</body>` tag

3. (Optional) To enable Internet Explorer 6/7 support:

4. Add the "styled" class to any `<select>`'s you'd like to style:

Live Demo

To Do

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Last publish

Collaborators

styled.js

Styled.js

Browser support

Usage

1. Include the Styled.js stylesheet at the end of your document's <head>

2. Include the Styled.js javascript at the end of your document, right before the closing </body> tag

3. (Optional) To enable Internet Explorer 6/7 support:

4. Add the "styled" class to any <select>'s you'd like to style:

Live Demo

To Do

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

1. Include the Styled.js stylesheet at the end of your document's `<head>`

2. Include the Styled.js javascript at the end of your document, right before the closing `</body>` tag

4. Add the "styled" class to any `<select>`'s you'd like to style:

Weekly Downloads