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;

}

相关推荐
SL_staff18 小时前
销售知识管理的断点分析与技术解法:从3天找话术到秒级检索
java·开源·github
荣码18 小时前
向量数据库选型:4种方案全测了,选错重来成本最高
java·python
北城笑笑18 小时前
Server 18 ,Nginx + Vite 前端部署排错实战:从 `/api/gpt/chat` 404 到 9012 后端服务的完整定位过程
linux·运维·前端·nginx·ubuntu·vue
rannn_11118 小时前
【力扣hot100】二叉树专题+总结
java·算法·leetcode·二叉树
江华森18 小时前
从抓包到嗅探:用 C 语言把《计算机网络》第 9-13 章全部跑一遍
前端
IT_陈寒19 小时前
Vite打包给我挖的这个坑,差点搞崩我的项目
前端·人工智能·后端
摇滚侠19 小时前
《Docker技术入门与实战 第4版》阅读笔记 6 使用 Dockerfile 创建镜像 2
java·笔记·docker
恋猫de小郭19 小时前
Flutter A2UI 的正确用法,怎么把 AI 和动态 UI 结合有效生产
android·前端·flutter
余额瞒着我当琳19 小时前
C++--vector第二讲:手写 C++ STL:vector 源码剖析与迭代器失效分析
android·java·c++
程序员-珍19 小时前
安卓开发:同名 styles.xml 在不同分支/文件夹的合并规则
android·xml·前端