Gunnar Bittersmann: CSS Ecken abrunden

Beitrag lesen

@@JJ

Es kann auch nicht schaden, den Typen des Eingabefelds auf search zu ändern. Bei virtuellen Tastaturen (Smartphones, Tablets, …) hat die Call-to-action-Taste dann eine angepasste Beschriftung.

Das habe ich versucht, aber das hat mir mien css etwas unschön gestaltet, weil dann das Textfeld von der Höhe her nicht mehr passte (obwohl css angepasst auf search).

Dass die Darstellung für text- und search-Eingabefelder so voneinander abweicht, hat mich auch etwas irritiert.

Das Boxmodell mit * { box-sizing: border-box } hilft da. (Das sollte sowieso in jedem Stylesheet stehen.)

Und die height-Angabe weg. Und schon sehen beide gleich aus.

Und die outline: none-Angabe weg! Das ist ein schwerer Fehler. Das entfernt die Markierung, wenn das Eingabefeld per Tastatursteuerung fokussiert wird.

Die gute Nachricht ist, dass Browser bei Maussteuerung keinen Rahmen mehr setzen.


... ist typografischer Frevel. Da ist das Auslassungszeichen zu verwenden – im Deutschen mit Leerzeichen davor. Wenn du das Zeichen nicht irgendwoher (von hier oder aus der Zeichentabelle) rauskopieren willst, kannst du in HTML auch … verwenden.

Du hast immer noch die falschen Punkte …

🖖 Живіть довго і процвітайте

PS: Statt in px solltest du Längen relativ zur Schriftgröße, d.h. in em angeben.

PPS: input[type='text'] zu selektieren ist keine so gute Idee. type='text' ist Default für Eingabefelder, kann im Markup also weggelassen werden. Wenn man das tut (Code-Refactoring irgendwann in der Zukunft), dann greift der Selektor nicht mehr.

--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter