Animierter Platzhalter

Original: http://csscience.com/placeholder/

by Jens Grochtdreis

HTML

<input class="place" type="search" id="search" size="50">
    <label class="searchlabel" for="search"></label>

    <h1>Some Fun With Placeholders</h1>

    <p>Here's some text to click and defocus the input</p>

CSS

.place:focus + .searchlabel { margin-top: -70px;}
.place:hover + .searchlabel { opacity: 0.5;}
.place:focus + .searchlabel { opacity: 1; cursor: auto;}

.searchlabel::after {content: 'Enter Text To Search';}
.place:hover + .searchlabel::after { content: 'Click to Remove This';}
.place:focus + .searchlabel::after { content: 'Press Enter To Submit';}

.searchlabel {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

p { margin: 0 0 10px;}
a { color: teal;}
a:hover { color: black;}

input {
  padding: 10px 15px;
  border: 1px solid #666;
  -webkit-appearance: none
}

.searchlabel {
  font-size: 15px;
  font-family: Georgia;
  font-style: italic;
  color: #666;
  cursor: text;
  margin: -31px 0 0 15px;
  position: absolute;
  display: block;
}

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}
h1,h2,h3,h4,h5,h6 {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0 5px;
}