css实现可伸缩的搜索框

全屏阅读
  • 基本信息
  • 作者：
  • 作者已发布：961篇文章
  • 发布时间：2024年02月22日 10:19:20
  • 所属分类：CSS, html, Html5, WEB前端
  • 阅读次数：613次阅读
  • 标签：

效果图：

自动草稿

自动草稿

代码：

<!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>

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明：本文由mpxq168发布，所有内容仅代表个人观点。版权归恒富网和mpxq168共有，欢迎转载， 但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。

目前有 0 条留言 其中：访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言！