Mobile friendly UIs

Requires Bootstrap

by tonytlwu

HTML

<form class="form-horizontal" role="form">
    <!-- TEXT AREA -->
	<div class="form-group">
		<label for="textArea10" class="col-sm-6 control-label">Paragraph</label>
		<div class="col-sm-6">
			<textarea class="form-control" rows="3" id="textArea10" name="textArea"></textarea>
		</div>
	</div>
					
	<!-- SLIDER -->
	<div class="form-group">
		<label for="slider1" class="col-sm-6 control-label">Maecenas faucibus mollis interdum.</label>
		<div class="col-sm-4">
			<input type="range" name="slider1" id="slider1" min="10000" max="100000" value="20000" step="500">
		</div>
        <div class="col-sm-2">
            <input type="text" class="form-control output" name="slider1-val" id="slider1-val" for="slider1" value="£20,000" />
        </div>
	</div>

    <!-- CHECKBOX -->
	<div class="form-group">
		<label class="col-sm-6 control-label">Look! Awesome checkboxes</label>
		<div class="col-sm-6">
			<div class="checkbox">
				<label>
				    <input type="checkbox" name="checkBox" value="Option1"> Option 1
				</label>
			</div>
			<div class="checkbox">
				<label>
				    <input type="checkbox" name="checkBox" value="Option1"> Option 2
				</label>
			</div>
			<div class="checkbox">
				<label>
				    <input type="checkbox" name="checkBox" value="Option1"> Option 3
				</label>
			</div>
		</div>
	</div>
					
	<!-- RADIO -->
	<div class="form-group">
		<label class="col-sm-6 control-label">Look! Awesome Radio buttons</label>
		<div class="col-sm-6">
			<div class="radio">
				<label>
				    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"> Option one
				</label>
			</div>
			<div class="radio">
				<label>
				    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two
				</label>
			</div>
		</div>
	</div>
				  	
	<!-- SELECT -->
	<div class="form-group has-errors">
		<label class="col-sm-6 control-label">Select one of the following</label>
		<div class="col-sm-6">
			<select class="form-control"...

CSS

/* Inspiration: http://andymatthews.net/code/jQuery-Mobile-Bootstrap-Theme/forms.html */

body {
    margin: 10px;
}

.checkbox label,
.radio label{
    background: #ffffff;
    display: block;
    padding: 10px 16px 10px 32px;
    margin: 0 !important;
}

.checkbox label:active,
.radio label:active {
    background: #e6e6e6;
}

.checkbox.active label,
.radio.active label {
    background: #972182;
    color: #fff;
}

.radio input,
.checkbox input {
    /* display: none; */
}

.checkbox, .radio {
    padding: 0 !important;
    border: 1px solid #ccc;
}

.checkbox + .checkbox,
.radio + .radio{
    border-top: none;
}

.form-group .checkbox:first-child,
.form-group .radio:first-child,
.form-group .checkbox:first-child label,
.form-group .radio:first-child label{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.form-group .checkbox:last-child,
.form-group .radio:last-child,
.form-group .checkbox:last-child label,
.form-group .radio:last-child label{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Slider styles */

input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    position: relative;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 36px;
    width: 24px;
    border-radius: 4px;
    background: #972182;
    cursor: pointer;
    margin-top: 4px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 0px 2px 5px rgba(0,0,0,0.5) /* Add cool effects to your sliders! */
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
   ...

JavaScript

/**
*	@name							Elastic
*	@descripton						Elastic is jQuery plugin that grow and shrink your textareas automatically
*	@version						1.6.11
*	@requires						jQuery 1.2.6+
*
*	@author							Jan Jarfalk
*	@author-email					[email protected]
*	@author-website					http://www.unwrongest.com
*
*	@licence						MIT License - http://www.opensource.org/licenses/mit-license.php
*/

(function($){ 
	jQuery.fn.extend({  
		elastic: function() {
		
			//	We will create a div clone of the textarea
			//	by copying these attributes from the textarea to the div.
			var mimics = [
				'paddingTop',
				'paddingRight',
				'paddingBottom',
				'paddingLeft',
				'fontSize',
				'lineHeight',
				'fontFamily',
				'width',
				'fontWeight',
				'border-top-width',
				'border-right-width',
				'border-bottom-width',
				'border-left-width',
				'borderTopStyle',
				'borderTopColor',
				'borderRightStyle',
				'borderRightColor',
				'borderBottomStyle',
				'borderBottomColor',
				'borderLeftStyle',
				'borderLeftColor'
				];
			
			return this.each( function() {

				// Elastic only works on textareas
				if ( this.type !== 'textarea' ) {
					return false;
				}
					
			var $textarea	= jQuery(this),
				$twin		= jQuery('<div />').css({
					'position'		: 'absolute',
					'display'		: 'none',
					'word-wrap'		: 'break-word',
					'white-space'	:'pre-wrap'
				}),
				lineHeight	= parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
				minheight	= parseInt($textarea.css('height'),10) || lineHeight*3,
				maxheight	= parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
				goalheight	= 0;
				
				// Opera returns max-height of -1 if not set
				if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
					
				// Append the twin to the DOM
				// We are going to meassure the height of this, not the textarea.
				$twin.appendTo($textarea.parent());
				
				// Copy the essential styles (mimics) from the textarea to the...