cre8 - Forms

by PhilQ

HTML

<input type="text" name="" value="" placeholder="Tekst" class="cre8-text cre8-small" />
<input type="text" name="" value="" placeholder="Tekst" class="cre8-text cre8-medium" />
<input type="text" name="" value="" placeholder="Tekst" class="cre8-text cre8-large" />
<label class="cre8-select-label"><select name="" class="cre8-select cre8-large">
    <option class="placeholder" value="" disabled="disabled" selected="selected">Kies een optie</option>
    <option value="1">Optie 1</option>
    <option value="2">Optie 2</option>
    <option value="3">Optie 3</option>
    </select></label>
<input type="text" name="" value="" placeholder="Tekst" class="cre8-text cre8-xlarge" />

<input type="radio" name="r" value="" placeholder="Tekst" class="cre8-radio" id="r1" /><label for="r1">Optie 1</label>
<input type="radio" name="r" value="" placeholder="Tekst" class="cre8-radio" id="r2" /><label for="r2">Optie 2</label>

<input type="checkbox" name="c[]" value="" placeholder="Tekst" class="cre8-checkbox" id="c1" /><label for="c1">Optie 1</label>
<input type="checkbox" name="c[]" value="" placeholder="Tekst" class="cre8-checkbox" id="c2" /><label for="c2">Optie 2</label>

CSS

@font-face{font-family:'Glyphicons Regular';src:url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.eot');src:url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.woff') format('woff'),url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.ttf') format('truetype'),url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');font-weight:normal;font-style:normal}
body {
    font-family: sans-serif;
    color: #2e2e2e;
    background-color: #f2f2f2;
}
input {
    float: left;
    cclear: left;
}
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

/* == Forms == */
::-webkit-input-placeholder { /* WebKit browsers */
    color: #c0c0c0;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #c0c0c0;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #c0c0c0;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #c0c0c0;
}
.placeholder {
    color: #c0c0c0;
}

.cre8-text {
    float: left;
    margin: 2px;
    padding: 5px 5px;
    color: #606060;
    background-color: #ffffff;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid  rgba(0,0,0, 0.3);
    outline: none;
    font-size: 1em;
    line-height: 1.2em;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.20);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.20);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.20);
    transition: box-shadow 0.15s linear 0s, border 0.15s linear 0s;  
    -webkit-transition: box-shadow 0.15s linear 0s, border 0.15s linear 0s;  
    -moz-transition: box-shadow...