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;

}

相关推荐
程序员老邢5 分钟前
【技术底稿 12】内网统一日志系统 Loki + Promtail 全流程部署(对接 Grafana,监控日志一体化)
java·运维·程序人生·grafana·devops
银河系的一束光10 分钟前
使用 IntelliJ IDEA 开发 Java 程序时 , 会遇到以下中文乱码问题 :
java·ide·intellij-idea
小凡同志11 分钟前
从 Vibe Coding 到 Spec-Driven:AI 编程范式的下一次进化
前端·人工智能·架构
hbstream12 分钟前
受够了Vibe Coding的失控?换个起点,让AI事半功倍
前端·人工智能
chxii12 分钟前
在IIS中开启http跳转到https 和 http2的介绍
前端·http·https
Via_Neo17 分钟前
判断字符串前缀(26年蓝桥杯JAVA B组)
java·职场和发展·蓝桥杯
XiYang-DING24 分钟前
【Java】从源码深入理解HashMap和TreeMap
java·开发语言
霪霖笙箫28 分钟前
「JS全栈AI Agent学习」六、当AI遇到矛盾,该自己决定还是问你?—— Human-in-the-Loop
前端·面试·agent
煜bart30 分钟前
使用 TypeScript 实现算法处理
开发语言·前端·javascript
若水不如远方34 分钟前
一文讲透单点登录原理(SSO):从同域共享到跨域票据
java·后端