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;

}

相关推荐
鸽鸽程序猿14 分钟前
【JavaEE】【SpringCloud】环境与工程搭建
java·spring cloud·java-ee
我居然是兔子6 小时前
异常练习:在试错中吃透Java异常处理的底层逻辑
java·开发语言
布列瑟农的星空7 小时前
Playwright使用体验
前端·单元测试
卤代烃7 小时前
🦾 可为与不可为:CDP 视角下的 Browser 控制边界
前端·人工智能·浏览器
CC.GG7 小时前
【C++】STL容器----unordered_map和unordered_set的使用
java·数据库·c++
_XU7 小时前
AI工具如何重塑我的开发日常
前端·人工智能·深度学习
C_心欲无痕8 小时前
vue3 - defineExpose暴露给父组件属性和方法
前端·javascript·vue.js·vue3
鹿人戛8 小时前
HarmonyOS应用开发:相机预览花屏问题解决案例
android·前端·harmonyos
Overt0p8 小时前
抽奖系统(4)
java·spring boot·tomcat
萌萌哒草头将军8 小时前
绿联云 NAS 安装 AudioDock 详细教程
前端·docker·容器