Skip to content
Browse files

Initial Commit

  • Loading branch information...
0 parents commit e198d7db1e11500f0af3e07bbd0c22f2284eb98a @Xeoncross committed Aug 13, 2011
Showing with 665 additions and 0 deletions.
  1. +163 −0 form.css
  2. +45 −0 grid.css
  3. +430 −0 index.html
  4. +3 −0 readme.markdown
  5. +24 −0 style.css
163 form.css
@@ -0,0 +1,163 @@
+/*
+ * Structural Form Styles
+ */
+
+fieldset { margin: 0; padding: 0; border: none; }
+
+input + em { display: block;} /* Fix for checkbox, button, and radio messages */
+
+label span { float: right; color: #999; }
+
+input, textarea, button
+{
+ color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ vertical-align: middle;
+}
+
+input[type=text],
+input[type=email],
+input[type=password],
+input[type=tel],
+input[type=url],
+textarea {
+ width: 100%;
+ padding: 5px;
+ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+ -moz-box-sizing: border-box; /* Firefox, other Gecko */
+ box-sizing: border-box; /* Opera/IE 8+ */
+ /* IE 6/7 */
+ *padding: 0 0 .5em 0;
+ *text-indent: 5px;
+ *width: 98%;
+}
+
+
+/*
+ * Theme Styling
+ */
+
+.form_error input[type=text],
+.form_error input[type=email],
+.form_error input[type=password],
+.form_error input[type=tel],
+.form_error input[type=url],
+.form_error textarea
+{
+ -webkit-box-shadow: inset 0px 0px 5px 0px #d96c72;
+ -moz-box-shadow: inset 0px 0px 5px 0px #d96c72;
+ box-shadow: inset 0px 0px 5px 0px #d96c72;
+ border-color: #AF1436;
+}
+
+.form_success input[type=text],
+.form_success input[type=email],
+.form_success input[type=password],
+.form_success input[type=tel],
+.form_success input[type=url],
+.form_success textarea
+{
+ -webkit-box-shadow: inset 0px 0px 5px 0px #74db74;
+ -moz-box-shadow: inset 0px 0px 5px 0px #74db74;
+ box-shadow: inset 0px 0px 5px 0px #74db74;
+ border-color: #4ab04a;
+}
+
+input[type=text],
+input[type=text]:focus,
+input[type=email],
+input[type=email]:focus,
+input[type=password],
+input[type=password]:focus,
+input[type=tel],
+input[type=tel]:focus,
+input[type=url],
+input[type=url]:focus,
+textarea,
+textarea:active
+{
+ background: #fff;
+ border: 1px solid #ddd;
+ border-top: 1px solid #999;
+ border-left: 1px solid #ccc;
+ border-bottom: 1px solid #eee;
+ -webkit-box-shadow: inset 0px 0px 4px 2px #eee;
+ -moz-box-shadow: inset 0px 0px 4px 2px #eee;
+ box-shadow: inset 0px 0px 4px 2px #eee;
+}
+
+input[type=text]:focus,
+input[type=email]:focus,
+input[type=password]:focus,
+input[type=tel]:focus,
+input[type=url]:focus,
+textarea:focus
+{
+ -webkit-box-shadow: inset 0px 0px 5px 0px #78a5e3;
+ -moz-box-shadow: inset 0px 0px 5px 0px #78a5e3;
+ box-shadow: inset 0px 0px 5px 0px #78a5e3;
+ border-color: #4b6375;
+}
+
+.form_error em { color: #d81b21; }
+.form_success em { color: #4ab04a; }
+
+button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"]
+{
+ -webkit-appearance: none;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding;
+ background-clip: padding-box;
+ background: #ddd url(../images/button.png) repeat-x;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
+ background: -moz-linear-gradient(top center, #fff 0%, #ddd 100%);
+ border: 1px solid;
+ border-color: #ddd #bbb #999;
+ cursor: pointer;
+ color: #333;
+ /*
+ Helvetica Neue present, because it works better
+ for line-height on buttons than Arial, on OS X.
+ */
+ font: bold 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
+ outline: 0;
+ overflow: visible;
+ padding: 3px 10px;
+ text-shadow: #fff 0 1px 1px;
+ width: auto;
+
+ /* IE7 */
+ *padding-top: 2px;
+ *padding-bottom: 0px;
+}
+
+/* IE7 */
+button
+{
+ *padding-top: 1px;
+ *padding-bottom: 1px;
+}
+
+button:hover,
+input[type="reset"]:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover
+{
+ background: #e0e0e0; /* Old browsers */
+ background: -moz-linear-gradient(top, #e0e0e0 0%, #f7f7f7 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #e0e0e0 0%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #e0e0e0 0%,#f7f7f7 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #e0e0e0 0%,#f7f7f7 100%); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
+ background: linear-gradient(top, #e0e0e0 0%,#f7f7f7 100%); /* W3C */
+ text-shadow: #fff 0px -1px 1px;
+ border-color: #999 #ccc #aaa;
+}
45 grid.css
@@ -0,0 +1,45 @@
+/*
+ * Simple 930px Grid
+ * Based on http://webdesignerwall.com/tutorials/the-simpler-css-grid
+ * 12 columns @50px each, 30px gutter
+ */
+.grid_1 { width: 50px; }
+.grid_2 { width: 130px; }
+.grid_3 { width: 210px; }
+.grid_4 { width: 290px; }
+.grid_5 { width: 370px; }
+.grid_6 { width: 450px; }
+.grid_7 { width: 530px; }
+.grid_8 { width: 610px; }
+.grid_9 { width: 690px; }
+.grid_10 { width: 770px; }
+.grid_11 { width: 850px; }
+.grid_12 { width: 930px; }
+
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12 { margin-left: 30px; float: left; display: inline; overflow: hidden; }
+
+.container { width: 930px; margin: 0 auto; overflow: hidden; }
+.container .first { margin-left: 0; clear: left; }
+
+/* new clearfix */
+.clearfix:after {
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: " ";
+ clear: both;
+ height: 0;
+}
+* html .clearfix { zoom: 1; } /* IE6 */
+*:first-child+html .clearfix { zoom: 1; } /* IE7 */
430 index.html
@@ -0,0 +1,430 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+ <title>FormStyle - CSS Styling for Forms</title>
+
+ <link rel="stylesheet" href="grid.css" />
+ <link rel="stylesheet" href="form.css" />
+ <link rel="stylesheet" href="style.css" />
+
+ <!--[if IE]><![endif]-->
+
+ <!--[if lt IE 9]>
+ <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+</head>
+<body>
+
+<div class="container">
+
+ <form method="post">
+
+ <h1>Linear Form</h1>
+
+ <fieldset>
+ <p>
+ <label>Text</label>
+ <input type="text" name="text" />
+ </p>
+ <p>
+ <label>Url</label>
+ <input type="url" name="url" />
+ </p>
+ <p>
+ <label>Password</label>
+ <input type="password" name="password" />
+ </p>
+ <p>
+ <label>Email</label>
+ <input type="email" name="email" />
+ </p>
+ <p>
+ <label>Tel</label>
+ <input type="tel" name="tel" />
+ </p>
+ <p>
+ <label>Checkbox</label>
+ <input type="checkbox" name="checkbox" />
+ </p>
+ <p>
+ <label>Radio</label>
+ <input type="radio" name="radio" />
+ </p>
+ <p>
+ <label>Range</label>
+ <input type="range" name="range" />
+ </p>
+ <p>
+ <label>Search</label>
+ <input type="search" name="search" />
+ </p>
+ <p>
+ <label>Selectbox</label>
+ <textarea cols="30" rows="5" >Textarea text</textarea>
+ </p>
+ <p>
+ <label>Textarea</label>
+ <select id="select_dd" name="select_dd">
+ <optgroup label="Group 1">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+ <optgroup label="Group 2">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+
+ <optgroup label="Group 3">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+ </select>
+ </p>
+ <p>
+ <input type="reset" name="reset" />
+ <input type="button" value="Button" name="button" />
+ <input type="submit" name="submit" />
+ </p>
+ </fieldset>
+
+
+ <h1>Grid Form</h1>
+ <p>One of the problems with CSS grids is that they chop off elements that
+ extend past the given column. This is a problem with elements that are 100%
+ in width (like text inputs) that have any padding applied. This system
+ attempts to solve that.</p>
+
+ <fieldset>
+
+ <div class="first grid_4">
+ <p>
+ <label>Text <span class="help">support text</span></label>
+ <input type="text" name="text" />
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>Text <span class="help">support text</span></label>
+ <input type="text" name="text" />
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>Text <span class="help">support text</span></label>
+ <input type="text" name="text" />
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <div class="first grid_4">
+ <p>
+ <label>URL <span class="help">support text</span></label>
+ <input type="url" placeholder="http://" name="url" />
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>URL <span class="help">support text</span></label>
+ <input type="url" placeholder="http://" name="url" />
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>URL <span class="help">support text</span></label>
+ <input type="url" placeholder="http://" name="url" />
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <div class="first grid_4">
+ <p>
+ <label>Password <span class="help">support text</span></label>
+ <input type="password" name="password" />
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>Password <span class="help">support text</span></label>
+ <input type="password" name="password" />
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>Password <span class="help">support text</span></label>
+ <input type="password" name="password" />
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <div class="first grid_4">
+ <p>
+ <label>Email <span class="help">support text</span></label>
+ <input type="email" name="email" />
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>Email <span class="help">support text</span></label>
+ <input type="email" name="email" />
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>Email <span class="help">support text</span></label>
+ <input type="email" name="email" />
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <div class="first grid_4">
+ <p>
+ <label>Tel <span class="help">support text</span></label>
+ <input type="tel" name="tel" />
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>Tel <span class="help">support text</span></label>
+ <input type="tel" name="tel" />
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>Tel <span class="help">support text</span></label>
+ <input type="tel" name="tel" />
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <div class="first grid_4">
+ <p>
+ <label>Checkbox: <span class="help">support text</span></label>
+ <input type="checkbox" name="checkbox" /> Left
+ <input type="checkbox" name="checkbox" /> Right
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>Checkbox: <span class="help">support text</span></label>
+ <input type="checkbox" name="checkbox" /> Left
+ <input type="checkbox" name="checkbox" /> Right
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>Checkbox: <span class="help">support text</span></label>
+ <input type="checkbox" name="checkbox" /> Left
+ <input type="checkbox" name="checkbox" /> Right
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <div class="first grid_4">
+ <p>
+ <label>Radio: <span class="help">support text</span></label>
+ <input type="radio" name="radio" /> yes
+ <input type="radio" name="radio" /> no
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>Radio: <span class="help">support text</span></label>
+ <input type="radio" name="radio" /> yes
+ <input type="radio" name="radio" /> no
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>Radio: <span class="help">support text</span></label>
+ <input type="radio" name="radio" /> yes
+ <input type="radio" name="radio" /> no
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <div class="first grid_4">
+ <p>
+ <label>Range <span class="help">support text</span></label>
+ <input type="range" name="range" />
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>Range <span class="help">support text</span></label>
+ <input type="range" name="range" />
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>Range <span class="help">support text</span></label>
+ <input type="range" name="range" />
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <div class="first grid_4">
+ <p>
+ <label>Search <span class="help">support text</span></label>
+ <input type="search" placeholder="Search" name="search" />
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>Search <span class="help">support text</span></label>
+ <input type="search" name="search" />
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>Search <span class="help">support text</span></label>
+ <input type="search" name="search" />
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <div class="first grid_4">
+ <p>
+ <label>Selectbox</label>
+ <textarea cols="30" rows="5" >Textarea text</textarea>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>Selectbox</label>
+ <textarea cols="30" rows="5" >Textarea text</textarea>
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>Selectbox</label>
+ <textarea cols="30" rows="5" >Textarea text</textarea>
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <div class="first grid_4">
+ <p>
+ <label>Textarea</label>
+ <select id="select_dd" name="select_dd">
+ <optgroup label="Group 1">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+ <optgroup label="Group 2">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+
+ <optgroup label="Group 3">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+ </select>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_success">
+ <label>Textarea</label>
+ <select id="select_dd" name="select_dd">
+ <optgroup label="Group 1">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+ <optgroup label="Group 2">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+
+ <optgroup label="Group 3">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+ </select>
+ <em>Looking good!</em>
+ </p>
+ </div>
+
+ <div class="grid_4">
+ <p class="form_error">
+ <label>Textarea</label>
+ <select id="select_dd" name="select_dd">
+ <optgroup label="Group 1">
+ <option>Some text goes here</option>
+
+ <option>Another choice could be here</option>
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+ <optgroup label="Group 2">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+ <option>Yet another item to be chosen</option>
+
+ </optgroup>
+ <optgroup label="Group 3">
+ <option>Some text goes here</option>
+ <option>Another choice could be here</option>
+ <option>Yet another item to be chosen</option>
+ </optgroup>
+ </select>
+ <em>There was a problem</em>
+ </p>
+ </div>
+
+ <p>
+ <input type="reset" name="reset" />
+ <input type="button" value="Button" name="button" />
+ <input type="submit" name="submit" />
+ </p>
+ </fieldset>
+
+</form>
+</div>
+
+</body>
+</html>
3 readme.markdown
@@ -0,0 +1,3 @@
+## CSS Form Styles
+
+This is a basic style system for form elements which includes support for success/error messages and field callouts.
24 style.css
@@ -0,0 +1,24 @@
+/*
+ * Basic Page Styles
+ * @see normalize and gridless projects
+ */
+html
+{
+ height: 100%;
+ font-size: 100%;
+ overflow-y: scroll; /* Force a scrollbar in non-IE */
+ -webkit-text-size-adjust: 100%; /* Remove iOS text size adjust without disabling user zoom */
+}
+
+body
+{
+ margin: 0;
+ min-height: 100%;
+}
+
+body, button, input, select, textarea
+{
+ font: 16px/1.625 Arial, sans-serif;
+ *font-size: 1em; /* IE7 and older: IE can't resize px based text and most mobiles don't default the text to 16px */
+ color: #222;
+}

0 comments on commit e198d7d

Please sign in to comment.
Something went wrong with that request. Please try again.