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;

}

相关推荐
用户9174396539几秒前
Elasticsearch Percolate Query使用优化案例-从2000到500ms
java·大数据·elasticsearch
Johnnyhaha7 分钟前
Docker Compose Pull 超时与代理踩坑记录
前端
烟袅8 分钟前
React 表单的控制欲:什么时候我们真得控制它了,什么时候该放养了?
前端·react.js
不想秃头的程序员10 分钟前
吃透 JS 事件委托:从原理到实战,解锁高性能事件处理方案
前端·面试
AntoineGriezmann10 分钟前
前端 Token 刷新机制实战:基于 Axios 的 accessToken 自动续期方案
前端
烟袅13 分钟前
从定时器管理出发,彻底搞懂防抖与节流的实现逻辑
前端·javascript
yaoxin52112329 分钟前
279. Java Stream API - Stream 拼接的两种方式:concat() vs flatMap()
java·开发语言
前端小L30 分钟前
贪心算法专题(十三):画地为牢的艺术——「划分字母区间」
javascript·算法·贪心算法
坚持学习前端日记1 小时前
2025年的个人和学习年度总结以及未来期望
java·学习·程序人生·职场和发展·创业创新
Cosmoshhhyyy1 小时前
《Effective Java》解读第29条:优先考虑泛型
java·开发语言