首先是一个文本框,这个文本框需要一些样式,如阴影和圆角效果;
第二,获得焦点和失去焦点时的伸缩效果;
第三,文字提示显示(未点击文本框的情况下)和消失效果(点击文本框的情况下);
<style>
input{
color: #ccc;
padding: 6px;
margin: 10px;
outline: none;
overflow:hidden;
border-radius: 18px; /*圆角效果*/
background: #fafafa;
border: 1px solid #ddd;
-moz-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1); /*Firefox 下盒子的阴影效果*/
-webkit-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1); /*Chrome、Safari 下盒子的阴影效果*/
box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);
-webkit-transition: all .3s; /*过渡效果的时间*/
-moz-transition: all .3s;
-o-transition: all .3s;
}
.style1{
width: 100px;
}
.style1:focus{
width: 160px;
}
</style>
上面的CSS样式只完成了一、二两步,第三步不在CSS代码里,在下面代码中:
<input class="style1" type="text" value="请输入搜索内容..." οnblur="if(this.value=='') value='请输入搜索内容...';" οnclick="if(this.value=='请输入搜索内容...')value='';"/>