Sample form element rules, that style text, radio and checkbox inputs as well as selectboxes and textareas consistently across browsers when used with 'I Can't Believe It's a Control!' https://github.com/matthewwithanm/jquery-icbiacontrol/

icbiacontrol.less

/*!
 * icbiacontrol sample styles
 *
 * Copyright 2013 Antoine Butler
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Sample form element styles, that style text, radio and checkbox inputs as well as
 * selectboxes and textareas consistently across browsers. Built by @aebsr
 */

// Extends Bedrock, a minimal less baseline-> https://github.com/aebsr/bedrock;
// could likely also extend Twitter Bootstrap, but hasn't been fully tested.
@import '../components/bedrock/baseline.less';

@highlight: #307dd4;

// For Demo Only
body {
  background: #eee;

	> div {
		margin: 1em 1em .5em;
		padding: 1em 1em .5em;
		font: 300 1em/1.5 Helvetica, Arial, sans-serif;
		background: white;
	}
}
// END Demo Only

.input() {
	.border-radius(6px);
	.box-shadow(inset 0 1px 4px rgba(70, 75, 89, .6));

	border: 4px solid #f5f5f5;
	background: white;
	font-size: .85em;
	color: #999;

	// Subtle focus style, not entirely accessible as old IE's don't inset box shadows
	&:focus,
	&.focus {
		.box-shadow(inset 0 0 1px 2px lighten(@highlight, 35%));

		outline: none;
	}
}

input {
	.input();

	padding: 6px 8px;
}

textarea {
	.input();
	.size(200px, 500px);

	display: block;
	padding: 6px 8px;
}

.icbiacontrol {
	.input();

	// Trigger cursor change on any child element hover event
	// Subtle visual queue of clickability, rather than a hover treatment
	* {
		cursor: pointer;
	}

	// Ensure that widget fills entire space available
	// This elements size is what the inputs and selects are dynmically sized based on
	.icbiacontrol-widget {
		.size(100%);

		display: block;
	}

	// Default styles for Radio and Checkboxes
	&.icbiaradio,
	&.icbiacheckbox {
		.inline-block();
		.size(28px);

		i {
			.size(10px);
			.inline-block();
			.opacity(0);

			background: @highlight;
			margin: 5px;
		}
	}

	// Radio button active style
	&.icbiaradio {
		.border-radius(20px);

		vertical-align: middle;

		i {
			.border-radius(10px);

			float: left;
		}
	}

	// Checkbox active style
	&.icbiacheckbox i {
		.border-radius(2px);
	}

	// Toggle state visibility when checked
	&.checked i {
		.opacity(100);
	}

	// selectbox
	&.icbiaselect {
		.size(38px, 300px);
		background: white;
		line-height: 20px;
		display: block;

		.icbiaselect-widget {
			.size(100%);

			display: block;

			.icbiaselect-display-wrapper {
				display: block;
				padding-right: 30px;
				padding: 6px 0 6px 6px;
			}

			.icbiaselect-arrow {
				.size(30px);
				.border-radius(5px 3px 3px 5px);
				#gradient > .vertical(#fcfcfc, #efefef);

				border: 1px solid #cccfd8;
				position: absolute;
				top: 0;
				right: 0;
				display: block;

				i {
					.size(100%);

					display: block;

					&:after {
						content: '\25BE';
						text-align: center;
						line-height: 28px;
						display: block;
						font-style: normal;
						font-size: 1.2em;
						color: @highlight;
					}
				}
			}
		}
	}
}

// Using Modernizr, this hides checkboxes and selectboxes if JS is enabled.
// This will cut down on the flash of unstyled form elements while jquery is loading.
.js {
	input[type="radio"],
	input[type="checkbox"],
	select {
		.opacity(0);
	}
}