可伸缩的搜索框

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

 

<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='';"/>