css实现可伸缩的搜索框

最新推荐文章于 2024-06-29 19:03:28 发布

weixin_30251587

最新推荐文章于 2024-06-29 19:03:28 发布

阅读量1.2k

点赞数 1

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/ryans/p/6858257.html

版权

效果图：

代码：

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

转载于:https://www.cnblogs.com/ryans/p/6858257.html

weixin_30251587

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css实现可伸缩的搜索框

效果图：代码：<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>可伸缩搜索框demo</title>...
复制链接

扫一扫