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;

}

相关推荐
yxlalm1 分钟前
5.3解决超卖问题
java·spring boot·超卖
前端精髓21 分钟前
React 更新 state 中的对象
javascript·react.js·ecmascript
豆约翰26 分钟前
css自制图书封面效果
前端·css
积硅步致千里31 分钟前
Fyne 兼容性:报错还能救,透明窗才要命
前端·后端
李少兄41 分钟前
Java 中只有值传递吗?
java·开发语言·python
名字还没想好☜1 小时前
Spring @EventListener 事件驱动解耦实战:同步转异步、事务绑定与顺序控制
java·数据库·后端·python·spring
一木 之林1 小时前
插件、MCP、Skill 的区别?
java·c++·人工智能
可乐鸡翅yeah_1 小时前
hls.js 播放质量埋点实战,采集卡顿、起播、错误指标定位线上用户问题
开发语言·前端·javascript·ecmascript·音视频·m3u8·音视频在线播放
小刘在重生~1 小时前
面试重点:final、finalize、finally 三者区别
java
tedcloud1231 小时前
Wand-Enhancer:如何搭建一套远程开发与测试环境
前端·人工智能·macos·开源·流程图