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;

}

相关推荐
_Legend_King5 分钟前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
爱吃青椒不爱吃西红柿‍️7 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
余生H7 分钟前
transformer.js(三):底层架构及性能优化指南
javascript·深度学习·架构·transformer
一棵开花的树,枝芽无限靠近你10 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜13 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
小码的头发丝、13 分钟前
Spring Boot 注解
java·spring boot
java亮小白199718 分钟前
Spring循环依赖如何解决的?
java·后端·spring
景天科技苑21 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX22 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
飞滕人生TYF24 分钟前
java Queue 详解
java·队列