Fancy Forms

form.html

<h1>Fancy Form</h1>
<form>
  <fieldset>
    <legend> Classic Inputs</legend>
    <p>First we'll start off with some classic textinput fields for single lines, passwords and multiline-text. These have been around for a long time and form a backbone for most webforms.</p>
    <p>
      <input type="text" id="textinput" />
      <label for="textinput">Input (text)</label>
    </p>
    <p>
      <input type="password" id="passwordinput" />
      <label for="passwordinput">Input (password)</label>
    </p>
    <p>
      <textarea id="textarea">Lorem Ipsum ...</textarea>
      <label for="textarea">Text area</label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Selections</legend>
    <p>Next are some other classics. Dropdowns, selection list, radio groups and the beloved checkboxes.</p>
    <p>
      <select id="dropdown">
        <option>First option</option>
        <option selected>Second option</option>
        <option>Third option</option>
      </select>
      <label for="dropdown">Dropdown</label>
    </p>
    <p>
      <select id="select" size="5">
        <option>First option</option>
        <option selected>Second option</option>
        <option>Third option</option>
      </select>
      <label for="select">List selection</label>
    </p>
    <p>
      <input type="radio" name="radio" id="radio1" />
      <label for="radio1">First radio button</label>
      <input type="radio" name="radio" id="radio2" checked />
      <label for="radio2">Second radio button</label>
      <input type="radio" name="radio" id="radio3" />
      <label for="radio3">Third radio button</label>
    </p>
    <p>
      <input type="checkbox" id="checkbox1" />
      <label for="checkbox1">First checkbox</label>
      <input type="checkbox" id="checkbox2" checked />
      <label for="checkbox2">Second checkbox</label>
      <input type="checkbox" id="checkbox3" />
      <label for="checkbox3">Third checkbox</label>
    </p>
  </fieldset>
  <fieldset>
    <legend>New attributes &amp; pseudo-classes</legend>
    <p>The following fields are simple text inputs that use some new HTML5 attributes (e.g. required, ...)</p>
    <p>
      <input type="text" id="textinput-placeholder" placeholder="Please fill me..." />
      <label for="textinput-placeholder">Input with placeholder text</label>
    </p>
    <p>
      <input type="text" id="textinput-required"  required />
      <label for="textinput-required">Required input (invalid if empty)</label>
    </p>
    <p>
      <input type="text" id="textinput-pattern" pattern="[0-9]{3}" value="invalid"/>
      <label for="textinput-pattern">Input with pattern (3 digits)</label>
    </p>
  </fieldset>
  <fieldset>
    <legend> HTML5 Inputs</legend>
    <p>Let's get a little fancier. Here we use some of the new &lt;input&gt; types that are introduced by HTML 5.</p>
    <p>
      <input type="email" id="emailinput" />
      <label for="emailinput">Input (email)</label>
    </p>
    <p>
      <input type="tel" id="telinput" />
      <label for="telinput">Input (tel)</label>
    </p>
    <p>
      <input type="url" id="urlinput" />
      <label for="urlinput">Input (url)</label>
    </p>
    <p>
      <input type="search" id="searchinput" />
      <label for="searchinput">Input (search)</label>
    </p>
    <p>
      <input type="color" id="colorinput" />
      <label for="colorinput">Input (color)</label>
    </p>
    <p>
      <input type="number" id="numberinput" />
      <label for="numberinput">Input (number)</label>
    </p>
    <p>
      <input type="range" id="rangeinput" />
      <label for="rangeinput">Input (range)</label>
    </p>
    <p>
      <input type="date" id="date" />
      <label for="dateinput">Input (date)</label>
    </p>
  </fieldset>
  <fieldset>
    <legend> HTML5 Elements</legend>
    <p>Last but not least, two new form elements.</p>
    <p>
      <meter min="0" max="20" value="12" id="meter">12cm</meter>
      <label for="meter">Meter</label>
    </p>
    <p>
      <progress max="100" value="50" id="progress">50%</progress>
      <label for="progress">Progress Bar</label>
    </p>
  </fieldset>
  <p class="center">
    <input type="submit" />
    <input type="reset" />
  </p>
</form>

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600);

/* Clearfix */
@mixin clearfix {
  *zoom: 1;
  &:before,
	&:after {
  	  content: "";
  	  display: table;
	}

	&:after {
 	   clear: both;
	}	 
}

.center {
  text-align: center;
}

body {
  background: url("http://wallpaperstock.net/vibe-bokeh_wallpapers_22019_1920x1200.jpg");
  background-size: cover;
  background-attachment: fixed;
  
  margin-bottom: 48px;
  
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 100%;
  line-height: 1.8em;
  color: #333;
}

h1 {
	text-align: center;
  font-size: 3em;
  color: #fff;
  text-shadow: 2px 1px 7px rgba(black, 0.4);
}

form {
  max-width: 960px;
  margin: 0 auto;
}

fieldset {
  background: rgba(white, 0.7);
  border: none;
  box-shadow: 1px 3px 8px rgba(black, 0.5);
}

legend {
  display: block;
  position: relative;
  top: 1em;
  padding: 0em;
  margin-bottom: 1em;
  
  font-size: 2em;
  font-weight: 300;
}

p {
  @include clearfix;
}

label {
  display: block;
  width: 20%;
  float: left;
  margin-right: 1em;
  padding: 0.4em;
  text-align: right;
  
  font-size: 0.7em;
  color: #333;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="color"],
input[type="number"],
input[type="range"],
input[type="date"],
textarea,
select,
{
  width: 50%;
  padding: 0.4em;
  
  border: none;
  border-radius: 3px;
  @include background(
    linear-gradient(rgba(#444, 0.2), rgba(black, 0.05))
    );
  
  box-shadow: inset 1px 1px 4px rgba(black, 0.3),
              0px 0px 6px rgba(white, 0.5);
  
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color: #444;
}

input[type="color"] {
  padding: 0.4em;
  
  border: none;
  border-radius: 3px;
  @include background(
    linear-gradient(rgba(#444, 0.2), rgba(black, 0.05))
    );
  
  box-shadow: inset 1px 1px 4px rgba(black, 0.3),
              0px 0px 6px rgba(white, 0.5);
  
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color: #444;
}

select {
  padding: 0.2em;
  
  &:not([size]) {
		border: solid 1px rgba(black, 0.3); 
	}
}

input[type="radio"],
input[type="checkbox"]
{
  display: none;
  
  & + label {
    cursor: pointer;
    
    position: relative;
    clear: left;
    line-height: 1.8em;
    
    &:after {
      content: " ";
      position: absolute;
      right: -2em;
      width: 0.5em;
      height: 0.5em;
      cursor: pointer;
      
      padding: 0.4em 0.5em 0.4em 0.3em;
  
      border: none;
      border-radius: 3px;
      @include background(
    		linear-gradient(rgba(#444, 0.2), rgba(black, 0.05))
    	);
  
 		 	box-shadow: inset 1px 1px 4px rgba(black, 0.3),
              		0px 0px 6px rgba(white, 0.5);
  
      font-size: 1.5em;
    }
  }
  
  &:checked + label:after {
    content: "\2713";
    color: #444;
    cursor: pointer;
    line-height: 0.7em;
  }
}
input[type="radio"]:checked + label:after {
	content: "";
  @include background(
    		linear-gradient(rgba(#0a0, 0.8), rgba(#030, 0.8))
    	);
}

meter, progress {
 	width: 50%; 
}

input[type="reset"],
input[type="submit"],
input[type="button"],
.button {
  cursor: pointer;
  padding: 0.4em 1em;
  
  border: none;
  border-radius: 3px;
  @include background(
    linear-gradient(rgba(#444, 0.2), rgba(black, 0.05))
    );
  
  box-shadow: inset 1px 1px 4px rgba(black, 0.3),
              0px 0px 6px rgba(white, 0.5);
  
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color: #fff;
  text-shadow: 1px 1px 2px black;
  
  &:hover {
    color: #333;
    text-shadow: 1px 1px 1px white;
    @include background(
    linear-gradient(#fff, #aaa)
    );
    box-shadow: 0px 1px 3px black;
  }
  &:active {
    position: relative;
    top: 1px;
    text-shadow: 1px 1px 1px white;
    color: #222;
    @include background(
    linear-gradient(#ddd, #999)
    );
    box-shadow: 0px 0px 8px rgba(white, 0.4),
                inset 0px 2px 6px black;
  }
}

:required + label:after {
  content: " (required)";
  display: block;
  font-size: 0.8em;
  font-weight: 300;
  line-height: 0.8em;
}

:optional:invalid + label {
  color: #a00;
  &:before {
  	content: "✕ ";
  }
}