记住用户名密码
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>
» 固定链接：恒富网
» 《css实现可伸缩的搜索框》
- 【上一篇】ChatGLM2-6B 训练参数解释
- 【下一篇】使用css怎样做一个伸缩input搜索框效果
目前有 0 条留言 其中：访客:0 条, 博主:0 条