CSS Ecken abrunden

[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