<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();
});
This Pen doesn't use any external CSS resources.