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;

}

相关推荐
弹简特2 分钟前
【JavaEE】Mybatis实现分页查询功能
java·java-ee·mybatis
烤麻辣烫4 分钟前
I/O流 基础流
java·开发语言·学习·intellij-idea
Jasonakeke4 分钟前
我的编程来时路
java·c++·python
我命由我123458 分钟前
React - BrowserRouter 与 HashRouter、push 模式与 replace 模式、编程式导航、withRouter
开发语言·前端·javascript·react.js·前端框架·html·ecmascript
Yvonne爱编码10 分钟前
Java 中的 hashCode () 与 equals () 核心原理、契约规范、重写实践与面试全解
java·开发语言·数据结构·python·hash
gelald12 分钟前
JVM - 运行时内存模型
java·jvm·后端
老虎062712 分钟前
Java基础面试题(08)—Java(集合—HashMap的使用和实现原理红黑树)
java·开发语言
Younglina15 分钟前
用AI全自动生成连环画?我试了,效果惊艳!
前端·ai编程·claude
Devin_chen21 分钟前
ES6 Class 渐进式详解
前端·javascript
小番茄夫斯基21 分钟前
前端开发的过程中,需要mock 数据,但是走的原来的接口,要怎么做
前端·javascript