CSS3 LT Form - Snippet

Preview
HTML
CSS
JS

<table>
  <tr><th><label for="form-email">Email</label></th>
    <td><input type="text" id="form-email"></td>
  </tr>
  <tr><th>
<label for="form-country">Country</label></th>
		<td>
			<span class="lt-select-wrapper">
				<select class="lt-select" name="country" id="form-country">			 
					<option value="" selected="selected"></option>
					<option value="AF">Afghanistan</option>
					<option value="AL">Albania</option>
					<option value="DZ">Algeria</option>
					<option value="AS">American Samoa</option>
					<option value="AD">Andorra</option>
					<option value="AO">Angola</option>
				</select>
			</span>
		</td>
	</tr>
	<tr>
		<th><label>Gender</label></th>
		<td>
			<span class="lt-radio-wrapper">
				<input class="lt-radio" type="radio" name="gender" id="form-gender-0" value="0" />
				<label for="form-gender-0" class="lt-radio-label"></label>
				<label for="form-gender-0">Male</label>
			</span>
			<span class="lt-radio-wrapper">
				<input class="lt-radio" type="radio" name="gender" id="form-gender-1" value="1" />
				<label for="form-gender-1" class="lt-radio-label"></label>
				<label for="form-gender-1">Female</label>
			</span>
		</td>
	</tr>
	<tr>
		<th>
			<label for="form-bio">Bio</label>
		</th>
		<td>
			<textarea id="form-bio"></textarea>
		</td>
	</tr>
	<tr>
		<th>
			<label for="form-terms">Terms</label>
		</th>
		<td>
			<span class="lt-checkbox-wrapper">
				<input class="lt-checkbox" id="form-terms" type="checkbox">
				<label class="lt-checkbox-label" for="form-terms"></label>
			</span>
		</td>
	</tr>
	
</table>

/* global */
body {
	font-family: 'Helvetica Neue', Helvetica;
	font-size: 13px;
  background-color: #eaeaea;
}

table {
	margin:20px auto;
}

td{
	padding:10px;
}

/* text, password, textarea */
input[type="text"], input[type="password"], textarea {
	width:180px;
	font-size: 14px;
	border:1px solid #aaa;
  padding:5px 5px 5px 3px;
  border-radius:4px;
  background: #fafafa;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
	position:relative;
}

/* select */
.lt-select {
	width:190px;
	border:1px solid #aaa;
  padding:5px 5px 5px 3px;
  border-radius:4px;
  background: #fafafa;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  cursor:pointer;
	position:relative;
}

.lt-select {
	padding-right:18px
}

.lt-select-wrapper {
	position:relative
}

.lt-select-wrapper:after {
	content:'<>';
	font:12px "Consolas", monospace;
	color:#aaa;
	-webkit-transform:rotate(90deg);
	-moz-transform: rotate(90deg);
	position:absolute;
	right:4px;
	top:0px;
	padding:0 0 2px;
	pointer-events:none;
	border-bottom:1px solid #ddd;
}

.lt-select-wrapper:hover:after{
	color: #666;
}

@-moz-document url-prefix() {
	select {padding-right:2px}
	.lt-select-wrapper:after {
		background: #fafafa;
		padding:0px 2px 3px 2px;
		top:0px;
		right:3px;
	}
 }

/* radio */
.lt-radio {
	visibility: hidden;
}

.lt-radio-wrapper {
	position: relative;
	left: 2px;
	display: inline-block;
	float: left;
	margin-right: 5px;
}

.lt-radio-wrapper .lt-radio-label{
	padding-left: 5px;
}

.lt-radio-wrapper .lt-radio-label {
	border:1px solid #aaa;
	cursor: pointer;
	position: absolute;
	width: 20px;
	padding-left: 0px;
	height: 20px;
	top: 0;
	left: 0px;
	border-radius: 4px;
	background: #fafafa;
}

.lt-radio-wrapper .lt-radio-label:after {
	border:1px solid #aaa;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	background: transparent;
	top: 4px;
	left: 4px;
	border: 3px solid #333;
	border-radius: 6px;
}

.lt-radio-wrapper .lt-radio-label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.5;
}

.lt-radio:checked + .lt-radio-label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

/* checkbox */
.lt-checkbox {
	visibility: hidden;
}

.lt-checkbox-wrapper {
	width: 20px;
		display:block;
	position: relative;
}

.lt-checkbox-label {
	border:1px solid #aaa;
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0;
	left: 0px;
	border-radius: 4px;
	background: #fafafa;
}

.lt-checkbox-label:after {
	border:1px solid #aaa;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 4px;
	left: 4px;
	border: 3px solid #333;
	border-top: none;
	border-right: none;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.lt-checkbox-label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.5;
}

.lt-checkbox:checked + .lt-checkbox-label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}