<div class="body">
	<h1>Placeholder text with<br/> typing effect</h1>
	<div class="wrapper">
		<input class="search" type="text" id="search" />
		<input class="submit" type="submit" value=" " />
	</div>
</div>
<h2>Click search to reset</h2>
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

html {
	background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);  
	font-family: 'PT Sans', Helvetica, Arial, sans-serif;
	padding-top: 50px;
}

h1 {
	text-shadow: 1px 1px 10px rgba(black, .5);
}

h1, h2 {
	text-align: center;
	color: white;
	font-size: 2.5em;
	line-height: 1.3em;
	font-weight: 300;
}

h2 {
	margin-top: 100px;
	font-size: 1.3em;
	font-style: italic;
	font-weight: 100;
}

.body {
	width: 100%;
	height: 250px;
	box-sizing: border-box;
}

input {
	box-sizing: border-box;
	font-size: 13px;
	vertical-align: top;
}

.wrapper {
	text-align: center;
	position: relative;
	height: 80px;
	font-size: 0;
	top: 50%;
	transform: translateY(-50%);
}

.search {
	padding: 0 30px;
	font-size: 18px;
	width: 60%;
	max-width: 400px;
	height: 80px;
	border: 1px solid darken(white, 30%);
	border-radius: 20px 0 0 20px;
}

.submit {
	cursor: pointer;
	border: none;
	background: url('http://thesuiteworld.com/wp-admin/maint/search-icon-white-png-540.png') no-repeat center center, #1E1E20;
	background-size: 35px 35px;
	border-radius: 0 20px 20px 0;
	padding: 15px 25px;
	display: inline-block;
	width: 150px;
	height: 80px;
}
View Compiled
////////////////////////////
// Twitter: @mikedevelops
////////////////////////////

// your custome placeholder goes here!
var ph = "Search Website e.g. \"Dancing Cats\"",
	searchBar = $('#search'),
	// placeholder loop counter
	phCount = 0;

// function to return random number between
// with min/max range
function randDelay(min, max) {
	return Math.floor(Math.random() * (max-min+1)+min);
}

// function to print placeholder text in a 
// 'typing' effect
function printLetter(string, el) {
	// split string into character seperated array
	var arr = string.split(''),
		input = el,
		// store full placeholder
		origString = string,
		// get current placeholder value
		curPlace = $(input).attr("placeholder"),
		// append next letter to current placeholder
		placeholder = curPlace + arr[phCount];
		
	setTimeout(function(){
		// print placeholder text
		$(input).attr("placeholder", placeholder);
		// increase loop count
		phCount++;
		// run loop until placeholder is fully printed
		if (phCount < arr.length) {
			printLetter(origString, input);
		}
	// use random speed to simulate
	// 'human' typing
	}, randDelay(50, 90));
}  

// function to init animation
function placeholder() {
	$(searchBar).attr("placeholder", "");
	printLetter(ph, searchBar);
}

placeholder();
$('.submit').click(function(e){
	phCount = 0;
	e.preventDefault();
	placeholder();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js