CSS: Input mit Buttons

In den nächsten Beiträgen geht es um Webprogrammierung und dabei um Themen, die eventuell nicht allen bekannt sind.

Als erstes habe ich mir das Thema Input mit integrierten Buttons ausgesucht.

Wer sich den Code ansieht, stellt fest, dass es sich um einen kleinen Hack handelt. Der Button ist nicht Teil des Inputs, sondern steht neben dem Input. Der Schmäh liegt darin, dass die Standard-Styles des Inputs entfernt werden.

appearance: none;
border: none;

An und für sich müssten die Border nicht deaktiviert werden, aber Safari zeigt diese standardmäßig doch an.

Die nächste Besonderheit ist „:focus-within“. Die Pseudo-Klasse „:focus“ dürfte den meisten bekannt sein. Diese hilft uns hier allerdings nicht, da das Input den Fokus hat und wir somit nur dieses stylen können. Ziel ist allerdings das darüberliegende Element anzupassen. Und genau dies können wir mit „:focus-within“ bewerkstelligen. Dieses ist dann aktiv, wenn ein Element innerhalb dieses Elements den Fokus hat.