Aangepaste formulierinvoer met afbeeldingen wordt niet correct weergegeven

I'm trying to create a custom form input that utilizes some images, it should look like this: enter image description here

Ik heb het volgende geprobeerd:



<body>
<form>
    
    <input type="text" value="   start typing to search..." size="40" maxlength="255"         />
    
</form>
</body>

Wat resulteert in:

enter image description here

Waarom?? Ik ben niet alleen geïnteresseerd in de oplossing, maar ook in de reden waarom dit niet werkt. Ik denk dat mijn begrip van inline-elementen naast elkaar verkeerd is.

 0
toegevoegd
Bekeken: 1
de bron
ja ru es pt de ar

3 antwoord

je moet misschien ook een float toevoegen: left! important; naar de invoer. Soms worden mijn problemen opgelost als dingen niet in de rij staan

1
toegevoegd
de bron

Probeer de vertical-align naar boven in te stellen

form * {vertical-align:top;}

also remove the spaces between the imgs and the input

1
toegevoegd
de bron
  1. whitespace verwijderen tussen img en input elementen (inclusief linebreaks)
  2. stel hoogte en regelhoogte in op invoer element om overeen te komen met de hoogte van het beeld
  3. zet opvulling en marge op 0 op invoer .
1
toegevoegd
de bron