Question

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

以下是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>

感谢

Answer 1

将此添加到CSS中，将CSS放置在输入字段中。

.search-wrapper {
    position: relative;
}

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

然后你只需要使用padding并更改top和left值来移动所有内容，以便它很好地适应并且没有任何重叠。

您可能还需要为图片设置width和height，这样对于输入字段来说它不会太大。

Answer 2

你可以这样解决：

＆＃13;

@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;
    }
}

＆＃13;

<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>

＆＃13;

Attached Fiddle

Answer 3

从技术上讲，您需要将父标记的位置设置为相对位置，然后将图像位置设置为绝对位置。然后，您可以在“输入”字段上叠加图像。另外，还有一件事要记住，你可能想要设置z-index。以防万一，您的图像不会落后于您的输入字段。通过将输入的填充设置为图像宽度周围的某处，确保为图像提供足够的空间。

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

这应该做的工作。

在搜索框中添加图片？

3 个答案: