CSS 创建搜索框
使用 CSS 创建美观的搜索框
以下是一个使用纯 CSS 设计的搜索框样式，包含搜索图标、圆角边框、聚焦效果和响应式适配。代码简洁，适合直接集成到现有项目中，并可与 JavaScript 结合实现搜索功能（如之前的列表搜索或联想功能）。
实现思路
- HTML 结构：
- 使用
<input>元素作为搜索框。 - 可选：添加一个
<button>或伪元素用于搜索图标。
- CSS 样式：
- 外观：圆角边框、阴影、合适的内边距。
- 图标：使用伪元素或背景图片添加搜索图标。
- 交互：聚焦时高亮边框，添加过渡动画。
- 响应式：确保在小屏幕上自适应。
- 扩展性：
- 支持不同主题（如暗色模式）。
- 可与 JavaScript 结合实现动态效果。
完整代码示例
以下是 HTML 和 CSS 代码，创建了一个带有搜索图标的现代搜索框。你可以保存为 .html 文件，在浏览器中测试。
CSS 搜索框