Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

styled.js

1.0.0 • Public • Published

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!

Keywords

none

install

npm i styled.js

Downloadsweekly downloads

1

version

1.0.0

license

none

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability