css实现可伸缩的搜索框
2024-10-19 19:47:05
效果图:
代码:
<!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>
最新文章
- 烂泥:dnsmasq搭建简易DNS服务器
- linux文件数相关命令
- Labview调用Python脚本
- javascript slice
- 从MySQL 5.5到5.7看复制的演进
- PS1--cannot be loaded because the execution of scripts is disabled on this system
- YOUYOU深入学习Ganglia之三(gmetad的软件架构)
- sysfs->;sys简单介绍
- 翻译:用Javascript的Function构造器伪造上下文 by Ben Nadel
- Libsvm的MATLAB调用和交叉验证
- Regular Ball Super Ball
- Lync安装随笔
- 挺有意思的HBase日志+Splunk
- Docker存储驱动之AUFS简介
- AJAX 中JSON 和JSONP 的区别 以及请求原理
- Gson的学习与使用
- cv2.cornerHarris()详解 python+OpenCV 中的 Harris 角点检测
- velocity 时间显示 时间格式化 时间转化
- 异常-CDH的service无法启动并抛出异常-org.apache.avro.AvroRemoteException: java.net.ConnectException: Connection refused (Connection refused)
- make capslock+hjkl as arrows
热门文章
- 接口实现后台GZIP压缩,pako.js 前端解压
- 变形和透视 perspective
- 元素(element)创建
- 数据结构实验之查找五:平方之哈希表 (SDUT 3377)
- mac 启动mysql
- 三十一、Gawk基础入门
- Spring-Cloud-Eureka实例
- Lucene核心数据结构——FST存词典,跳表存倒排或者roarning bitmap 见另外一个文章
- 学JavaScript的感想小结1
- ? 原创: 铲子哥 搜狗测试 今天 shell编程的时候,往往不会把所有功能都写在一个脚本中,这样不太好维护,需要多个脚本文件协同工作。那么问题来了,在一个脚本中怎么调用其他的脚本呢?有三种方式,分别是fork、source和exec。 1. fork 即通过sh 脚本名进行执行脚本的方式。下面通过一个简单的例子来讲解下它的特性。 创建father.sh,内容如下: #!/bin/bas