suchfeld - alles zentrieren - bei eingabe vom text abstand nach rechts hinzufügen ?

[dennis-html]

Hi

ich bin schon seit tagen nach der suche , wie ich bei text Eingabe ins suchfeld eine abstand nach rechts hinzufügen kann , da ich einen button rechts über dem suchfeld habe und somit bei text eingabe, der text irgendwann hinter dem button verschwindet …

alles soll dabei zentriert sein ! die Zentrierung habe ich bereits hinbekommen.

so jetzt wollte ich einen rechten abstand hinzufügen mithilfe von

input {

padding-right: 180px

}

allerdings verschiebt sich dann alles nach links , ich will aber das es zentriert bleibt.

Hat einer vielleicht irgendeine Idee , ich wäre euch sehr dankbar …

hier die Datei: https://jsfiddle.net/ehh1mbgq/

grüße dennis

[Gunnar Bittersmann]

@@dennis-html

allerdings verschiebt sich dann alles nach links , ich will aber das es zentriert bleibt.

Eben nicht, jedenfalls nicht auf den verfügbaren Platz im Eingabefeld bezogen. Sondern auf verfügbaren Platz + Button. Warum auch immer du das willst.

padding-left: 180px, bitteschön. Wie willst du den gesamten Platz nutzen und auf verfügbaren Platz + Button bezogen zentrieren?

Hast du dir auch die Frage gestellt, ob der Nutzer das will? Ich vermute mal, es ist ihr egal.

Was nicht egal ist: Das Eingabefeld hat keinerlei Beschriftung, ist dadurch nicht barrierefrei bedienbar, kurz: es ist nicht bedienbar. Alle Eingabefelder sollten zugehörige label-Elemente haben.

Das Formular hat auch keinen Submit-Button. Ein a-Element ist kein Button, ein button-Element ist einer.

Es ist unsinnig, HTML-Elemente missbräuchlich zu verwenden und dadurch verlorengehende Funktionalität mit JavaScript nachzubauen. Das führt zu unbenutzbaren Seiten oder erheblichem Mehraufwand. Meist zu beidem.

Außerdem sollte ein Suchfeld <input type="search"> sein.

hier die Datei: https://jsfiddle.net/ehh1mbgq/

Nein, hier: https://jsfiddle.net/ehh1mbgq/

Bitte verlinken.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Was nicht egal ist: Das Eingabefeld hat keinerlei Beschriftung, ist dadurch nicht barrierefrei bedienbar, kurz: es ist nicht bedienbar. Alle Eingabefelder sollten zugehörige label-Elemente haben.

Um der Frage gleich vorwegzugreifen, ob das Suchfeld nicht durch den Button (wenn’s denn einer wäre) hinreichend beschriftet ist: die hatte ich auch mal gestellt. Nein – so die einhellige Antwort derer, die’s wissen müssen.

LLAP 🖖