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;

}

相关推荐
雨雨雨雨雨别下啦1 分钟前
【从0开始学前端】 Git版本控制系统
前端·git
q***44819 分钟前
spring实例化对象的几种方式(使用XML配置文件)
xml·java·spring
前端一课9 分钟前
【前端每天一题】 第 15 题:CSS 水平垂直居中高频方案(Flex / Grid / transform 等)
前端·面试
q***985211 分钟前
Spring Boot:Java开发的神奇加速器(二)
java·spring boot·后端
前端一课13 分钟前
【前端每天一题】🔥 第 19 题:什么是重排(Reflow)和重绘(Repaint)?有什么区别?如何减少?
前端·面试
前端一课13 分钟前
【前端每天一题】🔥 第 14 题:Promise.then 链式调用执行顺序
前端·面试
前端一课14 分钟前
【前端每天一题】🔥 第 18 题:防抖和节流是什么?区别是什么?如何实现?
前端·面试
前端一课15 分钟前
【前端每天一题】第 16 题:数组去重高频方法(Set / filter / reduce / 对象键值法)
前端·面试
前端一课17 分钟前
【前端每天一题】🔥 第 17 题:什么是浅拷贝与深拷贝?如何实现深拷贝?
前端·面试
x***440118 分钟前
Windows操作系统部署Tomcat详细讲解
java·windows·tomcat