这个效果可以用于各种输入框效果,搜索什么的。
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