philippbosch · February 15, 2012 14:42
diff --git a/taparea.html b/taparea.html

 <!doctype html>
 <html>
 	<head>
 		<style>
 			#theButton, #theTextarea {
 				/* 
 					Position the button and the textarea at the exact same 
 					position initially. Also make them equally large. 
 				*/
 				position: absolute;
 				top: 50px;
 				left: 50px;
 				width: 160px;
 				height: 30px;
 				padding: 0;
 				-webkit-tap-highlight-color: rgba(0,0,0,0);
 			}
 			
 			#theButton {
 				/*
 					Place the button under the textarea.
 				*/
 				z-index: 1;
 				border: 0;
 				background: #CCC;
 			}
 			
 			#theTextarea {
 				/*
 					Place the textarea above the button.
 					Make it invisible initially by setting its opacity to
 					zero. That way it can still receive a tap and focus.
 				*/
 				z-index: 2;
 				opacity: 0;
 			}
 			
 			#theTextarea:focus {
 				/*
 					When focussed make the textarea visible, move it below
 					the button and resize it to proper dimensions.
 				*/
 				opacity: 1;
 				margin-top: 60px;
 				width: 400px;
 				height: 50px;
 			}
 			
 			#theTextarea:focus + #theButton {
 				/*
 					When the textarea is focussed, style the button in a way
 					that makes it look "pressed".
 				*/
 				background: #666;
 				color: #FFF;
 				box-shadow: rgba(0,0,0,0.3) 1px 2px 4px inset;
 				padding-top: 2px;
 			}
 		</style>
 		<meta name="viewport" content="width=device-width" />
 	</head>
 	<body>
 		<textarea id="theTextarea"></textarea>
 		<button id="theButton">Tap me!</button>
 	</body>
 </html>

	<!doctype html>
	<html>
	<head>
	<style>
	#theButton, #theTextarea {
	/*
	Position the button and the textarea at the exact same
	position initially. Also make them equally large.
	*/
	position: absolute;
	top: 50px;
	left: 50px;
	width: 160px;
	height: 30px;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	#theButton {
	/*
	Place the button under the textarea.
	*/
	z-index: 1;
	border: 0;
	background: #CCC;
	}

	#theTextarea {
	/*
	Place the textarea above the button.
	Make it invisible initially by setting its opacity to
	zero. That way it can still receive a tap and focus.
	*/
	z-index: 2;
	opacity: 0;
	}

	#theTextarea:focus {
	/*
	When focussed make the textarea visible, move it below
	the button and resize it to proper dimensions.
	*/
	opacity: 1;
	margin-top: 60px;
	width: 400px;
	height: 50px;
	}

	#theTextarea:focus + #theButton {
	/*
	When the textarea is focussed, style the button in a way
	that makes it look "pressed".
	*/
	background: #666;
	color: #FFF;
	box-shadow: rgba(0,0,0,0.3) 1px 2px 4px inset;
	padding-top: 2px;
	}
	</style>
	<meta name="viewport" content="width=device-width" />
	</head>
	<body>
	<textarea id="theTextarea"></textarea>
	<button id="theButton">Tap me!</button>
	</body>
	</html>