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 分钟前
【从零开始学Java | 第二十三篇】泛型(Generics)
java·开发语言·新手入门
用户693717500138412 分钟前
Google 推 AppFunctions:手机上的 AI 终于能自己干活了
android·前端·人工智能
m0_7505803014 分钟前
Java并发—Java线程
java·开发语言
QuZero26 分钟前
JDK7 ConcurrentHashMap principle
java·哈希算法
用户693717500138429 分钟前
AI让编码变简单,真正拉开差距的是UI设计和产品思考
android·前端·人工智能
孟祥_成都33 分钟前
别再吹牛了,100% Vibe Coding 存在无法自洽的逻辑漏洞!
前端·ai编程·vibecoding
独断万古他化43 分钟前
【Java 实战项目】多用户网页版聊天室:消息传输模块 —— 基于 WebSocket 实现实时通信
java·spring boot·后端·websocket·ajax·mybatis
yyt3630458411 小时前
spring单例bean线程安全问题讨论
java·spring
ai超级个体1 小时前
别再吹牛了,100% Vibe Coding 存在无法自洽的逻辑漏洞!
前端·ai·ai编程·vibe coding
我是大猴子1 小时前
事务失效的几种情况以及是为什么(详解)
java·开发语言