css相关:input输入框中加入搜索图标

<div style="margin-top: 0.5em;">

<div class="input-container">

<image src="/static/chemo2img/sousuo.png" style="height: 1.5em;" mode="heightFix"></image>

<input type="text" placeholder="输入车型关键字,如蔚来 特斯拉" />

</div>

</div>

.input-container {

position: relative;

}

.input-container image {

position: absolute;

top: 50%;

left: 0.5em;

/* 调整图标与输入框边缘的距离 */

transform: translateY(-50%);

pointer-events: none;

/* 确保图标不影响输入框点击 */

}

.input-container input {

padding-left: 2.1em;

/* 输入框左边距,确保文本不会覆盖图标 */

border: 1px solid #ccc;

border-radius: 0.9em;

padding-bottom: 0.4em;

padding-top: 0.3em;

}

相关推荐
Csvn7 分钟前
🧩 ESM vs CJS 混用的 7 个「天坑」——从 TypeScript 编译到 Node 与浏览器
前端
Csvn13 分钟前
🎯 Web 性能 API 集合:Performance Observer 的 5 个冷门妙用
前端
Csvn23 分钟前
深入 React 闭包陷阱:从根源上理解并根治 stale closure
前端
whyfail34 分钟前
前端学 Spring Boot(8):接口为什么越用越慢?
前端·spring boot·后端
用户059540174461 小时前
LangChain 记忆测试踩坑实录:这两个坑让我排查了 4 小时
前端·css
程序员黑豆1 小时前
鸿蒙应用开发:@Monitor 装饰器使用教程
前端·harmonyos
用户938515635071 小时前
从零构建《天龙八部》知识库:EPUB 加载→文本分割→向量嵌入→Milvus 存储→RAG 问答,一条链路打通
javascript·人工智能·全栈
@航空母舰2 小时前
SpringBoot通过Map实现天然的策略模式
java·spring boot·后端
SamChan902 小时前
在Web应用中集成PDF多语言翻译功能:PDFTranslator API实战指南
前端·python·ai·pdf·yapi·机器翻译
Co_Hui2 小时前
Java 并发编程
java