Hallo,
hab ein kleines Problem. In Gimp habe ich folgende Vorlage erstellt, diese möchte ich nun 1zu1 in HTML und CSS umsetzten, wenn möglich
[Blockierte Grafik: http://www.bilder-upload.eu/upload/fca3cb-1481470002.jpg]
Mein Ansatz war so:
HTML
<form>
<label for="s">Nach was wollen Sie suchen?</label>
<input type="text" name="s" class="search" placeholder="Suchbegriff / Artikelnummer">
<button id="btn-search"></button>
</form>CSS
form label {
display: none
}
.search {
border: 1px solid #efefef;
padding: 1em;
width: 25em;
border-radius: 1px;
}
#btn-search {
background-image: url(http://www.bilder-upload.eu/upload/a0d0b0-1481469460.png);
background-position: .5em center;
background-repeat: no-repeat;
padding-left: 2em;
border: none;
width: 20px;
height: 20px;
margin-left: -47px;
padding-top: 42px;
position: absolute;
}http://codepen.io/anon/pen/rWZNNL
Sieht leider nicht so aus wie auf dem Bild. Kann mir hier jemand weiterhelfen, dass es so ausschaut wie auf dem Bild?