Cool CSS3 Pop out search boxes

dabblet.css

/**
 * Cool CSS3 Pop out search boxes
 */

/* reset webkit search input browser style */
input {
	outline: none;
}
input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	font-family: inherit;
	font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none; /* remove the search and cancel icon */
}
 
/* search input field */
input[type=search] {
	background: #ededed url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFBAcH7+/vFBcXQ0VFoaKiwMHB4ODgYmRkgYODcnR0MzY2IyYm0NDQkZKSU1VVsLGx////XjAAyAAAABF0Uk5T/////////////////////wAlrZliAAAC70lEQVR42uya7ZKkIAxF+RaEVt//aad3tqZrhdgmEOiaWvLb0gO5hpBEHB82MQEmwASYABNgAkyACfCbAZy11n0GID0WLX5s3bwdCrAvShS2GTkGwHng69+mFtcfwC3inW2uM8Dl6l8WZEeAtIp7U3s3gIfA2dIHQC4Ca6vsACBXgbeY2AFI338KITEDEL9PIkABaEE1vA4wAOHC1VoHrS82RzMC7GDc3V9rtCECT3g2AFmGv2iyZyzgpMQFUAQAZYCnbOGKlQnAFifOhb58/qDhAcg393GtlcxXSnIAWMKykqrQoaBtwPttTZlWGQAc7aQzdBUISgy6F/Z21ms7wDnEWGrQkK0AiZxqeKoPBCELQqWciugDgf8HNlRgOW2BagVQ9MjmiJsm8C9DHvErTbYCHQaxJ3ygBUOBjisBCWAYATzuFHqzbRsjAPYKLml+4wc4/nsA1wugSoTLL/8N2wPRow2gKhRHxlDcfhjJRoCN7oNATEu5E5JzTra0AiRyjsmckn08Kc0WFG9fyJ6WEy8mWSlvbwfIlnQTWCz/1azpcmo4AIrrucdeDHEbcA+QivITrERZlLJ2HoCyRqYgIdhYWSdDFKkiUKTKdmEvi1TKcQGUVaLvMp35+YDcA9RGwB1duEKlvyiH6j+mGov2qFItvlTfp1Sb3fd4WwZdyvXo/PHANyyIBfPEDUDVgeYHOIyiEBh+gCNR3KAkP8DzuFf8OqS1bqVX3DqkNq/lI/LqsKJ9n4AWTazWYd0AgzP+1a2KOjwPplCrQ64ZEqCzhNMh2xCLqdQh3xSNrtMhH0Cq0yHjHFGdDhkB6nTIOUkF6dCNBIASJz0UAMqf95EAUNZyd6XnBYB06EcCgLM+biQApMNlKACkQzkSANKhHQoA6NAMBQB0uI8FKHVoBwMUOjwGA+Q6XIYDnHWo3HCA8+yVOcYD/DPRo+6ysk6j3fLv7DFi1LffbHmyFtNqnNP1E2ACTIAJMAEmwASYAF8CDACcyVZK4HOqEQAAAABJRU5ErkJggg==) no-repeat 9px center;
	background-size: 30px;
	border: solid 1px #ccc;
	padding: 9px 10px 9px 38px;
	width: 55px;
	
	-webkit-border-radius: 10em;
	-moz-border-radius: 10em;
	border-radius: 10em;
	
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
input[type=search]:focus {
	width: 130px;
	background-color: #fff;
	border-color: #6dcff6;
	
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}
 
/* placeholder */
input:-moz-placeholder {
	color: #999;
}
input::-webkit-input-placeholder {
	color: #999;
}
 
/* demo B */
#demo-b input[type=search] {
	width: 15px;
	padding-left: 10px;
	color: transparent;
	cursor: pointer;
}
#demo-b input[type=search]:hover {
	background-color: #fff;
}
#demo-b input[type=search]:focus {
	width: 130px;
	padding-left: 32px;
	color: #000;
	background-color: #fff;
	cursor: auto;
}
#demo-b input:-moz-placeholder {
	color: transparent;
}
#demo-b input::-webkit-input-placeholder {
	color: transparent;
}

dabblet.html

<form>
	<input type="search" placeholder="Search">
</form>
 
<h3>Demo B</h3>
<form id="demo-b">
	<input type="search" placeholder="Search">
</form>

dabblet.js

// alert('Hello world!');

settings.json

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