好玩的input输入框

这个效果可以用于各种输入框效果，搜索什么的。
demo：http://codepen.io/tianzi77/full/XmXZmW

简单的input标签作为html结构：

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

样式主要玩到了before after以及focues伪元素，伪元素。

        * {
            padding: 0;
            margin: 0;
        }

        body {
            font: 14px/20px Arial;
            background: #ccc;
            padding: 50px;
            width: 600px;
            margin: 0 auto;
        }

        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;
        }

        input:focus+.searchlabel {
            margin-top: -70px;
            opacity: 1;
            transition: all .5s linear;
        }

        input:hover+.searchlabel {
            opacity: .5;
        }

        .searchlabel::after {
            content: 'You are my everything';
        }

        input:hover+.searchlabel::after {
            content: 'I love you so much';
        }

        input:focus+.searchlabel::after {
            content: 'liuzhe xi huan ni';
            color: hsl(353, 100%, 48%);
        }

说到这里不得不总结一下伪元素和伪类之间的区别咯：

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

常见对的css伪类：
focus visited first-child visited hover active lang

常见的伪元素：

first－letter first－line before after

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

css3为了区别已经做了如下语法：

:Pseudo-classes
::Pseudo-elements