Bild im Suchfeld hinzufügen?

Question

Wie kann ich ein Bild in dieses Suchfeld einfügen? Ich möchte das Bild nach innen und nach links von dem palceholder Text positioniert werden ...

Hier ist der 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> 

dank

Answer 1

Fügen Sie diese auf Ihr CSS, das das Bild innerhalb des Eingabefeldes positioniert.

.search-wrapper { 
    position: relative; 
} 

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

Dann brauchen Sie nur padding zu verwenden und die top und left Werte ändern alles über zu bewegen, so ist es schön und nichts passt überlappt.

Möglicherweise müssen Sie auch ein width und height auf das Bild, so dass es nicht zu groß für das Eingabefeld ist.

Answer 2

Sie können es wie folgt lösen:

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

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

 

 

 
.search-input { 
 
    border: none; 
 
    outline: none; 
 
    color: $header-bg-color; 
 
\t 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

Answer 3

Technisch benötigen Sie eine übergeordnete Tag der Position relativ zu setzen, stellen Sie die Position des Bildes im Inneren absolut. Dann können Sie das Bild in Ihrem Eingabefeld überlagern. Noch eine Sache, an die Sie sich erinnern sollten, ist, dass Sie Ihren Z-Index einstellen sollten. Nur für den Fall, dass Ihr Bild nicht hinter Ihrem Eingabefeld steht. Stellen Sie sicher, dass Sie genügend Platz für Ihr Bild haben, indem Sie die Padding-Eingabe des Links auf einen Wert um die Bildbreite herum festlegen.

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

Dies sollte die Arbeit tun.