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;

}

相关推荐
小二·32 分钟前
Python Web 开发进阶实战:无障碍深度集成 —— 构建真正包容的 Flask + Vue 应用
前端·python·flask
曹轲恒8 小时前
Java中断
java·开发语言
xxxmine8 小时前
Java并发wait(timeout)
java
冰冰菜的扣jio8 小时前
Redis缓存问题——一致性问题、事务、持久化
java·spring·mybatis
施棠海8 小时前
监听与回调的三个demo
java·开发语言
niucloud-admin8 小时前
web 端前端
前端
毕设源码-钟学长9 小时前
【开题答辩全过程】以 家政服务平台为例,包含答辩的问题和答案
java
sheji341611 小时前
【开题答辩全过程】以 家庭教育资源网为例,包含答辩的问题和答案
java
百***787511 小时前
Grok-4.1与GPT-5.2深度对比:技术差异、适用场景及Python集成指南
java·python·gpt