首页用html+css实现透明搜索框带×带放大镜

用html+css实现透明搜索框带×带放大镜

时间: 2024-09-20 18:11:05 浏览: 103

要使用HTML和CSS创建一个透明搜索框，通常会包括一个输入字段、关闭按钮（×）和搜索图标（放大镜）。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .search-container { position: relative; display: inline-block; } .search-input { width: 300px; height: 36px; padding: 5px 10px; border: none; outline: none; background-color: rgba(0, 0, 0, 0.5); font-size: 14px; transition: opacity 0.3s ease; } .search-input:focus { opacity: 0.8; /* 可调整透明度 */ } .close-btn { position: absolute; top: 5px; right: 10px; cursor: pointer; color: #fff; font-size: 20px; } .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; } </style> </head> <body> <div class="search-container"> <input type="text" class="search-input" placeholder="请输入搜索内容..."> <button class="close-btn">×</button> <i class="search-icon" title="放大镜">🔍</i> </div> </body> </html> ``` 在这个例子中，`.search-input`是透明搜索框，它的背景颜色设置为半透明的rgba值。当焦点位于输入框时，透明度稍微降低，增加可见度。`.close-btn`和`.search-icon`作为绝对定位元素添加到容器内，并设置了点击事件以实现关闭或搜索功能。

阅读全文