Positionieren eines Bildes in einem text-Eingabe-Feld

Wollte ich ein Bild innerhalb eines text-input-Feld und versucht, die Stellung der Bild durch Verschachtelung der Bild-tag innerhalb des input-Tags und die Verwendung relativer position für die Eingabe und die absolute Positionierung für das image und die Einstellung der Bilder 'rechts' und 'oben' Wert auf 0. Ich dachte, das würde das Bild auf der rechten Seite das Textfeld ein. Stattdessen platziert das Bild auf der rechten Seite der Webseite. Ich bin mir nicht sicher, warum das so ist, ich fand eine Lösung durch die änderung der 'top' und 'richtigen' Werte zu positionieren, wo ich wollte, aber es schien nur so wie der erste Weg sollte gearbeitet haben, konnte jeder erklären, warum es nicht?

Dies ist der HTML-Code für die Texteingabe und Bild.

<input = "text" id="searchbar"> 

            <a href="#voice"> <img src ="microphone.png" id="voicebutton"/> </a>

</input>

Dies ist der CSS-obwohl ich arbeiten würde.

#searchbar{
    border: 0.6px solid #dbdbdb;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:600px;
    height:37.5px;
    position:relative;
}

#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:0;
    top:0;
}

Dies ist die CSS, die funktioniert.

#searchbar{
    border: 0.6px solid #dbdbdb;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:600px;
    height:37.5px;
    position:relative;
}

#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:395;
    top:207;
}

InformationsquelleAutor | 2016-03-05

css

Drei Möglichkeiten, es zu tun:

1- Nutzen Sie die Eigenschaften background-size und background-position Ihre background-image innerhalb der input-box. Beispiel:

CSS:

input[type=text] {
  box-sizing: border-box;
  padding-left: 10px;  
  font-size: 40px;
  width:85%;
  height:55px;
  border: 2px solid black;
  background-color: floralwhite;
  background-image: url("https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: 99% 100%;
}

input[type=text]:focus {
  background-color: pink;
  outline: none;
}

HTML:

<input type="text" placeholder="write here" id="searchbar">

2- Verwenden Sie einen negativen margin um das Bild über Sie (Sie können das Bild zu einem link). Beispiel:

CSS:

input[type=text] {
      box-sizing: border-box;
      padding-left: 10px;  
      font-size: 40px;
      width:85%;
      height:55px;
      border: 2px solid black;
      background-color: honeydew;  
      vertical-align: top;
    }

input[type=text]:focus {
      background-color: skyblue;
      outline: none;
    }

img {
margin-top: 3px;
margin-left: -55px;  
}

HTML:

<input type="text" placeholder="write here" id="searchbar"><a href="#"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;"></a>

3- Lassen Sie beide inputbox und Bild in einem container, in dem container position: relative und das Bild position: absolute (Sie können das Bild zu einem link). Beispiel:

CSS:

input[type=text] {
      box-sizing: border-box;
      padding-left: 10px;  
      font-size: 40px;
      width:100%;
      height:55px;
      border: 2px solid black;
      background-color: MintCream;  
      vertical-align: top;
    }

input[type=text]:focus {
      background-color: LightGreen;
      outline: none;
    }

img {
position: absolute;
top: 3px;
right: 5px;  
}

#container {
  position: relative;
  width:85%;
}

HTML:

<div id="container">
<input type="text" placeholder="write here" id="searchbar">
<a href="#"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;"></a>
</div>

aktualisiert mit 2 snippets. re-check bitte.
Das ist wirklich hat mir sehr geholfen Danke!

InformationsquelleAutor Le____

Zuerst von allen, können Sie nicht haben, Dezimalzahlen in Pixel, wie height: 37.5px;. Das wird nicht funktionieren. Auch right: 395; funktioniert nicht, weil es nicht angeben, was die Nutzung: Pixel, ems, Prozentsatz? Die input="text" ist falsch, es sollte input type="text" wie dies kann z.B. email oder radio.

Sagte, dass, um zu erreichen, was Sie möchten, Sie können hinzufügen, ein wrapper um Ihre input-Feld (wie .box-wrapper) und geben eine relative Positionierung mit der gleichen Größe wie das Eingabefeld. Diese schließen zum Beispiel.

CSS:

.box-wrapper {
    position: relative;
    width: 600px;
    height: 38px;
}

#searchbar{
    border: 1px solid #dbdbdb;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 38px;
    position: relative;
}

#voicebutton{
    width: 16px;
    height: 23px;
    position: absolute;
    top: 0;
    right: 0;
}

HTML:

<div class="box-wrapper">
  <input type="text" id="searchbar">
  <a href="#voice"><img src ="http://dummyimage.com/50x50/ffff00/fff" id="voicebutton"/></a>
</div>

InformationsquelleAutor Roy

0

Input-tag hat kein End-tag in HTML haben, sollten Sie entfernen Sie das schließende tag aus Ihrem HTML-code, außerdem können Sie positionieren Sie das element über das input-Feld ändern Sie Ihre CSS etwas wie dies (CSS war fast richtig, das problem ist das HTML) :
```
#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:16px;
    top:16px;
}
```
InformationsquelleAutor goncalopinto
0

In HTML-input-tag hat kein end-tag (im Gegensatz zu XHTML), so dass Ihr einen tag außerhalb Ihres input-tag.

InformationsquelleAutor andydavies

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.