好玩的input输入框

来源:转载

好玩的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

版权声明:本文为博主原创文章,未经博主允许不得转载。



分享给朋友:
您可能感兴趣的文章:
随机阅读: