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;

}

相关推荐
编码忘我3 分钟前
java策略模式实战之优惠券
java·后端
掘金安东尼7 分钟前
⏰前端周刊第 458 期v2026.3.24
前端·javascript·面试
心勤则明9 分钟前
用 SpringAIAlibab 让高频问题实现毫秒级响应
java·人工智能·spring
anzhxu10 分钟前
SpringBoot 3.x 整合swagger
java·spring boot·后端
gechunlian8810 分钟前
Spring Security 官网文档学习
java·学习·spring
小江的记录本13 分钟前
【Bean】JavaBean(原生规范)/ Spring Bean 【重点】/ 企业级Bean(EJB/Jakarta Bean)
java·数据库·spring boot·后端·spring·spring cloud·mybatis
qqty121713 分钟前
spring loC&DI 详解
java·spring·rpc
中国胖子风清扬17 分钟前
Camunda 8 概念详解:梳理新一代工作流引擎的核心概念与组件
java·spring boot·后端·spring cloud·ai·云原生·spring webflux
闻哥19 分钟前
MySQL InnoDB 缓存池(Buffer Pool)详解:原理、结构与链表管理
java·数据结构·数据库·mysql·链表·缓存·面试
前端付豪20 分钟前
实现必要的流式输出(Streaming)
前端·后端·agent