CSS Ecken abrunden

[JJ]

Hallo,

ich möchte ein Suchfeld mit Lupe links als Button erstellen, das links sowie rechts leicht abgerundete Ecken hat.

Ich habe es fast geschafft, aber entweder kann ich links abgerundete Ecken haben, indem ich left: 5px; notiere (dann ist aber nicht der gesamte Hintergrund orange) oder der gesamte Hintergrund ist orange (bei left: 0px;) aber die Ecken links nicht mehr abgerundet.

Wie bekomme ich hier beides hin?

JJ

[Staufer2]

Hallo,

ich möchte ein Suchfeld mit Lupe links als Button erstellen, das links sowie rechts leicht abgerundete Ecken hat.

CSS/Eigenschaften/border-radius kann als Wert 1-4 Längenangaben haben. Meinst du das?

Ich habe es fast geschafft, aber entweder kann ich links abgerundete Ecken haben, indem ich left: 5px; notiere (dann ist aber nicht der gesamte Hintergrund orange) oder der gesamte Hintergrund ist orange (bei left: 0px;) aber die Ecken links nicht mehr abgerundet.

left verschiebt ja nur dein label.

Entweder gibst du dem label auch einen border-radius; oder du kombinierst:

label {
  border-radius: 5px 0 0 5px;
}
input {
  border-radius: 0 5px 5px 0;
}

Wie bekomme ich hier beides hin?

Oder du schreibst dein label so:

<label for="search">
  <span class="visually-hidden">Suche</span>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <rect fill="orange" width="24" height="24" rx="3" />
   <path  d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0a4.5 4.5 0 1 1 9 0a4.5 4.5 0 0 1-9 0z"/>
  </svg>
</label>

Der span wird mit CSS ausgeblendet, das label erhält keine Hintergrundfarbe, dafür das SVG mit dem rect unterhalt des Symbols. Das rect kriegt ein rx-Attribut (geht auch als CSS!)

Gruß Staufer

[JJ]

Hallo Staufer,

Entweder gibst du dem label auch einen border-radius:

label {
  border-radius: 5px 0 0 5px;
}

Diese Lösung funktioniert und gefällt mir am besten.
Vielen Dank für die Hilfe.

JJ

[Gunnar Bittersmann]

@@JJ

Suchfeld mit Lupe links

Wozu das div? Du hast doch schon ein Containerelement. Wenn du dem form-Element die Klasse search-container verpasst, kannst du das div entsorgen.

Allerdings hast du kein Suchfeld. Mit role="search" hast du eins:

<form role="search" class="search-container">
  <label for="search">
    ⋮

Oder mit dem neuen search-Element, das aber noch so neu ist, dass man da wohl auch noch ein paar Tage das role-Attribut braucht:

<search role="search">
  <form class="search-container">
    <label for="search">
      ⋮

(Es ist noch so neu, dass es bislang weder in Can I Use noch in MDN auftaucht.)

---

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.

... 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.

<input type="search" id="search" name="search" placeholder="Suche …">

---

als Button

Button ist ein gutes Stichwort. Das Formular hat keinen. Klar, es kann mit Enter-Taste abgeschickt werden. Aber wissen das alle Nutzer? Ich bin mir nicht sicher, ob es nicht einen Submit-Button bräuchte. Ich werd bei nächster Gelegenheit mal nachfragen.

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

[Rolf B]

Hallo Gunnar,

verstehe ich das richtig, dass search nichts weiter ist als div mit role=search dran?

Rolf

[Gunnar Bittersmann]

@@Rolf B

verstehe ich das richtig, dass search nichts weiter ist als div mit role=search dran?

Nicht ganz.

Contexts in which this element can be used:
    Where flow content is expected.

Also manchmal span mit role="search" dran.

Der Sinn ist, dass die Markupsprache ein Element zur Verfügung stellt, sodass man kein role-Attribute zu setzen braucht und sich an die erste Direktive halten kann.

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

[Rolf B]

Hallo Gunnar Bittersmann,

wieso span? Für search und div gilt gleichermaßen "where flow content is expected" - die div Sonderlocke im dl Element lass ich mal beiseite.

Was die erste Direktive angeht - es gibt warpfähige HTML Elemente?!

Rolf

[Gunnar Bittersmann]

@@Rolf B

wieso span? Für search und div gilt gleichermaßen "where flow content is expected" - die div Sonderlocke im dl Element lass ich mal beiseite.

Ich frag mich, ob

<p>
  <search>
    <label for="search">Search</label>
    <input id="search"/>
  </search>
</p>

erlaubt sein wird. div in p ist es nicht.

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

[Rolf B]

Hallo Gunnar Bittersmann,

laut Spec nicht. p erwartet phrasing content, search ist flow content.

search innerhalb von phrasing content zuzulassen ist auch nicht richtig, weil das Inhaltsmodell von search wiederum flow ist.

Lösung könnte höchstens sein, search analog zu a als transparent zu definieren.

Rolf

[Gunnar Bittersmann]

@@Rolf B

laut Spec nicht. p erwartet phrasing content, search ist flow content.

search innerhalb von phrasing content zuzulassen ist auch nicht richtig, weil das Inhaltsmodell von search wiederum flow ist.

Lösung könnte höchstens sein, search analog zu a als transparent zu definieren.

Da hast du wohl in allen Punkten recht.

Also mal ein Ticket gegen die Spec erstellen …

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

[JJ]

@@Gunnar,

Wozu das div? Du hast doch schon ein Containerelement. Wenn du dem form-Element die Klasse search-container verpasst, kannst du das div entsorgen.

Allerdings hast du kein Suchfeld. Mit role="search" hast du eins:

<form role="search" class="search-container">
  <label for="search">
    ⋮

Hast recht, ich habe Beides umgesetzt.

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.

... 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.

<input type="search" id="search" name="search" placeholder="Suche …">

---

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).

als Button

Button ist ein gutes Stichwort. Das Formular hat keinen. Klar, es kann mit Enter-Taste abgeschickt werden. Aber wissen das alle Nutzer? Ich bin mir nicht sicher, ob es nicht einen Submit-Button bräuchte. Ich werd bei nächster Gelegenheit mal nachfragen.

Stimmt, da bleibe ich lieber vorsichtig, daher habe ich zusätzlich nun die Grafik als Button definiert.

JJ

[Gunnar Bittersmann]

@@JJ

Stimmt, da bleibe ich lieber vorsichtig, daher habe ich zusätzlich nun die Grafik als Button definiert.

label in button zu packen ist wohl keine so gute Idee. Was soll da beim Click passieren? Beim Click aufs Label wird das zugehörige Eingabefeld fokussiert; beim Click auf den Button das Formular abgeschickt.

Überhaupt macht ein label-Element noch keine zugängliche Beschriftung, wenn darin kein Text ist.

(Als letzte Möglichkeit mag eine assisitve Technologie das placeholder-Attribut als Beschriftung heranziehen. Verlassen würde ich mich darauf nicht.)

Du willst sowas

<form role="search" …>
  <button>
    <svg aria-hidden="true">…</svg>
    <span class="visually-hidden">Suche</span>
  </button>
  <label for="search" class="visually-hidden">Suchbegriffe</label>
  <input id="search" …/>
</form>

mit der CSS-Regel für .visually-hidden.

Oder doch nicht. Der Button vor dem Eingabefeld mutet seltsam an; der ist dahinter besser aufgehoben. Man kann das Lupen-Icon ja mit CSS links positionieren.

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

[Gunnar Bittersmann]

@@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.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

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.

input:is(:not([type]), [type='text']) sollte gehen.

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

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wenn du dem form-Element die Klasse search-container verpasst, kannst du das div entsorgen.

Allerdings hast du kein Suchfeld. Mit role="search" hast du eins:

Dann kannst du statt .search-container im Stylesheet auch form[role="search"] selektieren und die Klasse search-container entsorgen.

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

[JJ]

Hallo,

mal davon abgesehen, dass ich Tabellen nicht als Gestaltungselement nutzen sollte.

Warum verschiebt sich die Grafik meines Suchfeld so unschön, wenn ich den Viewport verkleinere und wie verhindere ich das?

Warum muss ich mehrere <br>-Tags verwenden, damit Datum und Zeit unterhalb des Suchfeldes stehen?

Wodurch ersetze ich das Tabellendesign am sinnvollsten? Flexbox? Grid?

JJ

[JJ]

Wodurch ersetze ich das Tabellendesign am sinnvollsten? Flexbox? Grid?

Habs mal versucht, im codepen siehts ganz ok aus, aber in den Produktivbetrieb eingesetzt ists eher mäßig und die Elemente sind nicht da, wo gewünscht.

JJ

[Auge]

Hallo

Warum verschiebt sich die Grafik meines Suchfeld so unschön, wenn ich den Viewport verkleinere und wie verhindere ich das?

Warum muss ich mehrere <br>-Tags verwenden, damit Datum und Zeit unterhalb des Suchfeldes stehen?

Weil du das Formular (.search-container) mit float: right aus dem Elementfluss entfernst. Wenn du das weglässt, und den einleitenden Text („Hier steht ein Text“) in ein eigenes Blockelement (vermutlich <p>) legst, kannst du getrost auf float verzichten. Allerdings rutscht dann dein Button wegen seiner absoluten Positionierung nach rechts. Lasse sie weg und definiere das Formular selbst als Grid für den Button und das Eingabefeld. Vermutlich kann dann auch gleich die relative Positionierung des Formulars entfallen.

Wodurch ersetze ich das Tabellendesign am sinnvollsten? Flexbox? Grid?

Für die Gesamtkonstruktion böte sich, unter Berücksichtigung des Rests der Seite, den wir aus dem Codepen nicht ersehen können, mutmaßlich ein Grid an.

Tschö, Auge