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;

}

相关推荐
前端毕业班10 小时前
前端"枚举"管理指南
前端·javascript
yuandiv10 小时前
告别"薛定谔的测试":Flaky Test 全链路治理实战
前端
不知名的老吴11 小时前
C++中emplace函数的不适场景总结(一)
java·开发语言·c++
明月_清风11 小时前
Claude Code 保姆级入门教程:零基础到 AI 编程高手,看这一篇就够了
前端·后端·claude
LJianK111 小时前
线程安全、线程同步、竞态条件
java·开发语言
Ting-yu11 小时前
SpringCloud快速入门(3)---- 创建微服务项目
java·spring cloud·微服务
善恶怪客11 小时前
Java-二维数组
java
勿忘,瞬间11 小时前
JDBC编程
java
ricardo197311 小时前
手写一个虚拟列表,万级数据滚动 FPS 稳定 60 帧
前端
小KK_11 小时前
新手必看:一篇文章带你搞懂JavaScript作用域
前端