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;

}

相关推荐
研☆香13 小时前
JavaScript 历史列表查询的方法
开发语言·javascript·ecmascript
小二·13 小时前
Python Web 开发进阶实战:可持续计算 —— 在 Flask + Vue 中构建碳感知应用(Carbon-Aware Computing)
前端·python·flask
Java程序员威哥13 小时前
【包教包会】SpringBoot依赖Jar指定位置打包:配置+原理+避坑全解析
java·开发语言·spring boot·后端·python·微服务·jar
恒拓高科WorkPlus13 小时前
如何通过即时通讯工具提升团队协作?
前端·安全
a程序小傲13 小时前
中国邮政Java面试被问:边缘计算的数据同步和计算卸载
java·服务器·开发语言·算法·面试·职场和发展·边缘计算
Java程序员威哥13 小时前
Java微服务可观测性实战:Prometheus+Grafana+SkyWalking全链路监控落地
java·开发语言·python·docker·微服务·grafana·prometheus
钟佩颖13 小时前
Vue....
前端·javascript·vue.js
漂流瓶jz13 小时前
Polyfill方式解决前端兼容性问题:core-js包结构与各种配置策略
前端·javascript·webpack·ecmascript·babel·polyfill·core-js
毕设源码-邱学长13 小时前
【开题答辩全过程】以 面向警务应用的问答系统的设计与实现为例,包含答辩的问题和答案
java
Y淑滢潇潇14 小时前
WEB 模拟学校官网
前端·css