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;

}

相关推荐
wuk99813 小时前
实现ROS系统的Websocket传输,向Web应用推送sensor_msgs::Image数据
前端·websocket·网络协议
键来大师14 小时前
Android15 RK3588 修改默认不锁屏不休眠
android·java·framework·rk3588
合作小小程序员小小店15 小时前
web网页开发,在线%考试管理%系统,基于Idea,vscode,html,css,vue,java,maven,springboot,mysql
java·前端·系统架构·vue·intellij-idea·springboot
天天进步201515 小时前
CSS Grid与Flexbox:2025年响应式布局终极指南
前端·css
多多*15 小时前
maven常用的命令
java·log4j·maven
xie_pin_an16 小时前
MyBatis-Plus 实战:MPJLambdaWrapper 多表联查用法全解析
java·spring boot·spring·mybatis
ᐇ95916 小时前
Java LinkedList集合全面解析:双向链表的艺术与实战
java·开发语言·链表
luyun02020216 小时前
Windows 11操作更丝滑,绝了
java·运维·figma
码银16 小时前
【数据结构】顺序表
java·开发语言·数据结构
Boop_wu16 小时前
[Java EE] 计算机基础
java·服务器·前端