css实现可伸缩的搜索框

效果图：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>可伸缩搜索框demo</title>
    </head>
    <body>
    <style type="text/css">
        .search-input{
                background: #ededed url(
                    http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px;
                padding: 8px 5px 8px 32px;
                width: 100px;
                border-radius: 18px; 
                color: #ccc; 
          
                outline: none; 
                overflow:hidden; 
                border-radius: 18px; 
          
                border: 1px solid #ddd; 
                -moz-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1); 
                -webkit-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1); 
                box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1); 
                -webkit-transition: all .3s; 
                -moz-transition: all .3s; 
                -o-transition: all .3s; 
        }

        .search-input:hover, .search-input:focus {
            border-color: #fff;
            color: #444;
            width: 200px;
        }
    </style>
    <div class="search-mb">
        <input class="search-input" type="text" value="请输入搜索内容..." onblur="if(this.value=='') value='请输入搜索内容...';" onclick="if(this.value=='请输入搜索内容...')value='';"/>
    </div>
    </body>
</html>

 

posted @ 2017-05-15 20:32  RyanxChen  阅读(1017)  评论(0)  编辑  收藏  举报