可伸缩的搜索框

来源：互联网发布：切莫软件可以做藏头诗编辑：程序博客网时间：2024/04/29 15:56

首先是一个文本框，这个文本框需要一些样式，如阴影和圆角效果；
第二，获得焦点和失去焦点时的伸缩效果；
第三，文字提示显示（未点击文本框的情况下）和消失效果（点击文本框的情况下）；

<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="请输入搜索内容..." onblur="if(this.value=='') value='请输入搜索内容...';" onclick="if(this.value=='请输入搜索内容...')value='';"/>

0 0