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;

}

相关推荐
Lan.W2 分钟前
element UI + vue2 + html实现堆叠条形图 - 横向分段器
前端·ui·html
FAQEW4 分钟前
若依(RuoYi-Vue)单体架构实战手册:自定义业务模块全流程开发指南
前端·后端·架构·若依二开
神算大模型APi--天枢64612 分钟前
合规与高效兼得:国产全栈架构赋能行业大模型定制,从教育到工业的轻量化落地
大数据·前端·人工智能·架构·硬件架构
千寻girling17 分钟前
马上元旦节了,手写一个《前端脚手架》庆祝一下 !
前端
qq_124987075328 分钟前
基于微信小程序的电子元器件商城(源码+论文+部署+安装)
java·spring boot·spring·微信小程序·小程序·毕业设计
嚣张丶小麦兜33 分钟前
认识vite
前端·javascript·vue.js
吃喝不愁霸王餐APP开发者35 分钟前
基于Spring Cloud Gateway实现对外卖API请求的统一鉴权与流量染色
java·开发语言
a努力。38 分钟前
美团Java面试被问:Redis集群模式的工作原理
java·redis·后端·面试
一雨方知深秋1 小时前
面向对象编程
java·封装·this·构造器·static关键字·成员变量·javabean实体类
资生算法程序员_畅想家_剑魔1 小时前
Java常见技术分享-11-责任链模式
java·spring boot·责任链模式