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;

}

相关推荐
meichaoWen几秒前
【nodejs】nodejs的一些基础知识
开发语言·前端·javascript
@Autowire2 分钟前
Grid-grid-template-areas 属性
前端·javascript·css
刘一说3 分钟前
腾讯位置服务JavaScript API GL地图组件库深度解析:Vue生态中的地理空间可视化利器
javascript·vue.js·信息可视化·webgl·webgis
kaico20183 分钟前
ConcurrentHashMap源码分析
java
虫小宝5 分钟前
企业微信API接口对接中Java后端的模拟测试(Mock)与单元测试实战技巧
java·单元测试·企业微信
Tim_Van7 分钟前
彻底解决:80 端口 GET/POST 正常,PUT 却报 ERR_CONNECTION_RESET?
java·vue.js·spring boot·ruoyi·若依
amazing-yuan8 分钟前
彻底解决该 TS 报错 + 提升编译效率
前端·javascript·vue.js·typescript·vue·异常报错处理
乔冠宇9 分钟前
前端工程化——ESLint + Prettier 规范代码开发
前端
前端小白在前进9 分钟前
优雅的使用Nexent创建与部署前端面试智能体
前端·面试·职场和发展