Permalink
Browse files

Added a testing file for styling

This html file shows all possible (?) styles for different states of
the selects. Good for writing 'themes' and testing out if any changes
to the css breaks the UI.
  • Loading branch information...
1 parent b577535 commit 13c479f34bbddc26bb47889c9721e3b341de5efb @emilbayes committed Apr 2, 2012
Showing with 86 additions and 0 deletions.
  1. +86 −0 test.html
View
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title></title>
+ <link rel="stylesheet" type="text/css" href="static/css/screen.css" media="all">
+ <!-- <link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css"> -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+ </head>
+ <body>
+ <!-- Single -->
+ <div class="chzn-container chzn-container-single chzn-container-active" style="width: 350px;">
+ <a class="chzn-single chzn-default"><span>Single closed</span><div><b></b></div></a>
+
+ </div>
+ <div class="chzn-container chzn-container-single chzn-container-active" style="width: 350px;">
+ <a class="chzn-single chzn-default chzn-single-with-drop"><span>Single open</span><div><b></b></div></a>
+ <div class="chzn-drop" style="width: 348px; top: 24px;">
+ <div class="chzn-search">
+ <input style="width: 313px;" value="search query">
+ </div>
+ <ul class="chzn-results">
+ <li class="no-results">No results match"<span>search query</span>"</li>
+ <li class="active-result" style="">No group option</li>
+ <li class="group-result" style="display: list-item;">Group header</li>
+ <li class="active-result group-option highlighted">Group option 1</li>
+ <li class="active-result group-option">Group option 2</li>
+ <li class="active-result group-option">Group option 3</li>
+ <li class="active-result">Option 1</li>
+ <li class="active-result highlighted">Option 2</li>
+ <li class="active-result">Option 3</li>
+ <li class="active-result">Option 4</li>
+ <li class="active-result">Option 5</li>
+ <li class="active-result">Option 6</li>
+ <li class="active-result">Option 7</li>
+ <li class="active-result">Option 8</li>
+ <li class="active-result">Option 9</li>
+ <li class="active-result">Option 10</li>
+ </ul>
+ </div>
+ </div>
+ <div class="chzn-container chzn-container-single" style="width: 350px;">
+ <a class="chzn-single">
+ <span>Single select withdeselect</span>
+ <abbr class="search-choice-close"></abbr>
+ <div><b></b></div>
+ </a>
+ </div>
+
+ <div style="height: 300px;"></div>
+ <!-- Multi -->
+ <div class="chzn-container chzn-container-multi chzn-container-active"style="width: 350px;">
+ <ul class="chzn-choices">
+ <li class="search-choice">
+ <span>Selected 1</span><a class="search-choice-close"></a>
+ </li>
+ <li class="search-choice">
+ <span>Selected 2</span><a class="search-choice-close"></a>
+ </li>
+ </ul>
+ <div class="chzn-drop" style="width: 348px; top: 29px;">
+ <ul class="chzn-results">
+ <li class="active-result">United States</li>
+ <li class="active-result">United Kingdom</li>
+ <li class="active-result highlighted">Afghanistan</li>
+ <li class="active-result">Albania</li>
+ <li class="active-result">Algeria</li>
+ <li class="active-result">American Samoa</li>
+ <li class="active-result">Andorra</li>
+ <li class="active-result">Angola</li>
+ <li class="active-result result-selected">Selected 2</li>
+ <li class="active-result">Antarctica</li>
+ </ul>
+ </div>
+ </div>
+ <div class="chzn-container chzn-container-multi"style="width: 350px;">
+ <ul class="chzn-choices">
+ <li class="search-field">
+ <input value="Blurred (but not disabled)" class="default" style="width: 300px;">
+ </li>
+ </ul>
+ </div>
+ </body>
+</html>

0 comments on commit 13c479f

Please sign in to comment.