JSFiddle - React, Tailwind, and code Playground

Simple Form Customization

by Jennifer Perrin

HTML

<div class="container">
    <h1>Simple Form Customization</h1>
    <p>Custom controls using zero Javascript and minimal markup</p>
    <form>
        <div class="row">
            <div class="third columns">
                <label>Text</label>
                <input type="text" />
            </div>
            <div class="third columns">
                <label>Email</label>
                <input type="Email" />
            </div>
            <div class="third columns">
                <label>Password</label>
                <input type="password" />
            </div>
            <div class="third columns">
                <label>URL</label>
                <input type="url" />
            </div>
            <div class="third columns">
                <label>Number</label>
                <input max="10" min="0" step="1" type="number" value="6" />
            </div>
            <div class="third columns">
                <label>Search</label>
                <input type="search" />
            </div>
            <div class="third columns">
                <label>Date</label>
                <input type="date" />
            </div>
            <div class="third columns">
                <label>Time</label>
                <input type="time" />
            </div>
            <div class="third columns">
                <label>Color</label>
                <input type="color" value="#6EB590" />
            </div>
        </div>
        <label>Radio Buttons (inline)</label>
        <div class="inline-group">
            <label class="radio" for="radio1">
                <input id="radio1" name="radiogroup" type="radio" />Radio 1<i class="icon-circle"></i>
            </label>
            <label class="radio" for="radio2">
                <input id="radio2" name="radiogroup" type="radio" />Radio 2<i class="icon-circle"></i>
            </label>
            <label class="radio" for="radio3">
                <input id="radio3" name="radiogroup" type="radio" />Radio 3<i...

CSS

@import url(http://fonts.googleapis.com/css?family=Quicksand);
@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.clearfix:after, .container:after, .inline-group:after, .column-group:after, .row:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* ==========
   Setup Page */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  padding: 3em;
  background-image: url(http://subtlepatterns.com/patterns/tileable_wood_texture.png);
  color: grey;
  font-family: 'Quicksand', sans-serif;
}

/* ================
   Container Styling */
.container {
  position: relative;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  padding: 3em;
  border-radius: 4px;
}
.container h1 {
  font-weight: normal;
  color: #6eb590;
  margin: 0 0 0 0;
}
.container p {
  color: #777777;
  margin: 0 0 1em 0;
  padding: 0 0 .5em 0;
  border-bottom: 1px solid #eee;
}

/* ===========
   Form Styles */
label {
  display: block;
  clear: both;
  margin-bottom: .5em;
  color: #6eb590;
}

input, textarea, select, button, .button, .select, .file {
  width: 100%;
  display: block;
}

input[type=text],
input[type=email],
input[type=phone],
input[type=password],
input[type=url],
input[type=number],
input[type=search],
input[type=date],
input[type=time],
input[type=color],
textarea,
label.select select,
label.file input {
  display: inline-block;
  border: 1px solid #dddddd;
  margin-bottom: 1em;
  line-height: 1.25em;
  padding: .5em;
  transition: border-color .2s ease;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.0625) inset;
  color: #777777;
}
input[type=text]:hover,
input[type=email]:hover,
input[type=phone]:hover,
input[type=password]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=search]:hover,
input[type=date]:hover,
input[type=time]:hover,
input[type=color]:hover,
textarea:hover,
label.select select:hover,
label.file input:hover {
 ...