Pretty form/input labels

dabblet.css

/**
 * Pretty form/input labels
 */

body {
	font-family: 'helvetica', sans-serif;
	font-size: 16px;
}

form {
	width: 290px;
	margin: 40px auto;
	padding: 5px;
	border: 1px solid #DDD;
	*zoom: 1;
}

form:before,
form:after {
	content: "";
	display: table;
}

form:after {
	clear: both;
}

fieldset {
	display: block;
	background-color: #7C7C7C;
	color: #FFF;
	border: none;
	width: 275px;
	padding: 5px;
	margin-bottom: 5px;
}

label {
	margin: 0;
}

input[type=text],
input[type=email] {
	display: inline-block;
	border: none;
	height: 100%;
	background-color: #7C7C7C;
	color: #FFF;
	font-size: 16px;
}

input[type=text]:active,
input[type=text]:focus,
input[type=email]:active,
input[type=email]:focus {
	outline: none;
}

input[type=submit] {
	float: right;
	color: #4B4B4B;
	background-color: #FFF;
	font-size: 14px;
	border: 1px solid #A5A5A5;
	padding: 4px;
	cursor: pointer;
}

input[type=submit]:hover,
input[type=submit]:active {
	box-shadow: 0 0 3px #7C7C7C;
}

::-webkit-input-placeholder {
   color: #C7C7C7;
}

:-moz-placeholder {
   color: #C7C7C7;  
}

::-moz-placeholder {
   color: #C7C7C7;  
}

:-ms-input-placeholder {  
   color: #C7C7C7;  
}

dabblet.html

<!-- Pretty form/input labels -->
<form>
	<fieldset>
		<label for="name">Name:</label>
		<input type="text" name="name" placeholder="First Last">
	</fieldset>
	<fieldset>
		<label for="email">Email:</label>
		<input type="email" name="email" placeholder="[email protected]">
	</fieldset>
	<input type="submit" value="Submit">
</form>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}