时间戳

首页 > 解决方案 > 将输入文本与输入图像合并

html - 将输入文本与输入图像合并

问题描述

我正在尝试将输入文本与输入图像合并，例如此图像 Intended Input

我的情况是这样的：我的输入

我已经尝试遵循本教程，它做了类似的事情：https ://www.youtube.com/watch?v=Hv0AiWFAiRg&t=410s

但我没有得到预期的结果。

这是我的代码： HTML

CSS-1

CSS-2

CSS-3

我应该怎么办？

标签： htmlcss

解决方案

您应该将放大镜玻璃放在带有文本输入的包装纸中。由于您没有使用它上传任何实际代码，因此这里有一张库存图片：

#search-wrapper {
  position: relative;
}

#search-icon {
  width: 16px;
  
  position: absolute;
  
  top: 0; bottom: 0;
  
  left: 6px;
  
  margin: auto 0;
}

#search-input {
  padding-left: 24px;
}
<div id="search-wrapper">
  <input id="search-icon" type="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Magnifying_glass_icon.svg/1200px-Magnifying_glass_icon.svg.png">

  <input id="search-input" type="text" placeholder="input thingy">
</div>

图标应该在包装内具有绝对定位，因此在包装内具有相对定位。要将其居中在顶部和底部之间，将其边距设置auto为顶部和底部边距，这由在顶部和底部设置为 0 的位置来支持。输入上的填充与图标占用的空间有关。在这种情况下，左右“边距”为 6px，宽度为 16px。

推荐阅读