在搜索框中添加图片？答案

【问题标题】：Add image inside search box?在搜索框中添加图片？
【发布时间】：2022-03-19 01:04:55
【问题描述】：

如何在此搜索框中添加图片？我希望图像位于占位符文本的内部和左侧...

这里是fiddle

HTML：

        <div class="searchbar">
            <h1>Welcome...</h1>
            <div id="sb-search" class="sb-search">
                <div class="search-wrapper">
                    <input class="search-input" placeholder="Search..." type="text" value="" name="search" id="search"/>
                    <img class="search-pic"src="img/search-icon.png"/>
                </div>
            </div>
        </div>

谢谢

【问题讨论】：

标签： html sass

【解决方案1】：

将此添加到您的 CSS 中，这会将图像定位在输入字段内。

.search-wrapper {
    position: relative;
}

.search-wrapper img {
    position: absolute;
    top: 0px;
    left: 0px;
}

然后您只需要使用padding 并更改top 和left 的值来移动所有内容，使其非常适合并且没有任何重叠。

您可能还需要为图像设置width 和height，这样输入字段就不会太大。

【讨论】：

【解决方案2】：

你可以这样解决：

@mixin searchbar-font {}
@mixin searchbar-styles {
    border: none;
    outline: none;
    color: $header-bg-color;
	  padding: 20px 65px 20px 20px;
    background: transparent;
    flex:1;
}

@mixin search-bar-input {
	border: none;
	outline: none;
}



.search-input {
    border: none;
    outline: none;
    color: $header-bg-color;
	  padding: 20px 65px 20px 20px;
    background: transparent;
    flex:1;
}
.search-wrapper {
    position: relative;
    background: white;
    display: flex;
    align-items: center;
    .search-input {
        @include searchbar-font;
        @include searchbar-styles;
    }
    .search-submit {
        @include search-bar-input;
    }
}

<div class="searchbar">
  <h1>Welcome...</h1>
  <div id="sb-search" class="sb-search">
    <div class="search-wrapper">
      <img class="search-pic" src="img/search-icon.png" />
      <input class="search-input" placeholder="Search..." type="text" value="" name="search" id="search" />
    </div>
  </div>
</div>

Attached Fiddle

【讨论】：

我非常感谢你，我的朋友和好心的先生！另外，我怎样才能让这个搜索栏出现在屏幕的右侧，但在较小的屏幕上放在下方？
很高兴它为你工作@theking，我不明白你的问题，也许包括快照？

【解决方案3】：

从技术上讲，您需要将父标记的位置设置为相对位置，然后将内部图像的位置设置为绝对位置。然后您可以将图像叠加在您的输入字段上。另外，要记住的另一件事是您可能想要设置 z-index。以防万一，您的图像不会落后于您的输入字段。通过将输入的左边距设置为图像宽度附近的某个位置，确保为图像提供足够的空间。

.search-wrapper{ 
   .search-input{
           padding-left: {image.width}px; 
   } 
   img{
           position:absolute; left:0; top:0; 
   } 
}

这应该可以完成工作。

【讨论】：