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;

}

相关推荐
西安小哥3 小时前
从前端到AI工程师:一场跨越鸿沟的真实蜕变之旅
前端
Prince4183 小时前
侧边栏收起缩放适配方案
前端
用户7783366132113 小时前
serpbase + Cloudflare R2 边缘持久化实战
前端·人工智能
郝亚军3 小时前
webstorm如何创建vue 3.js
javascript·vue.js·webstorm
এ慕ོ冬℘゜3 小时前
jQuery attr() 方法超详细讲解:属性获取、赋值、实战踩坑全解
前端·javascript·jquery
东方小月3 小时前
从零开发一个 Coding Agent(三):EventStream 事件流通道设计与实现
前端·人工智能·后端
程序员黑豆4 小时前
鸿蒙应用开发:Refresh + List 下拉刷新组件使用教程
前端·华为·harmonyos
Hilaku4 小时前
为什么大厂对前端算法要求极高?
前端·javascript·程序员
你可如意4 小时前
从Promise开始,一篇让你彻底建立起JS的异步编程模型
javascript
Tkto5 小时前
我用 WebGL 从「画个点」一路画到「贪吃蛇」
前端