Zum Inhalt springen
NativeCSS

Formulare

Native Formularelemente, zu Ende gestylt (helpers/forms.css) - kein Web-Component-Ersatz nötig, wo HTML schon reicht.

<div class="ncss-field">
  <label class="ncss-label ncss-label--required" for="name">Name</label>
  <input class="ncss-input" type="text" id="name" required>
  <span class="ncss-field-hint">Pflichtfeld</span>
</div>

Basis-Felder

Leer abschicken versuchen - erst nach Interaktion rot (:user-invalid).
Popup gestylt via appearance: base-select (Chrome/Edge) - auf Browsern ohne diese Unterstützung (Firefox) UND bewusst auch in Safari (bekannter Rendering-Bug, siehe Komponenten-Referenz) übernimmt automatisch js/combobox.js.
<option> darf mit appearance: base-select beliebige Kind-Elemente enthalten (nicht nur Text) - hier Icon + Label. <button><selectedcontent> steuert optional die Anzeige im geschlossenen Zustand.

Input-Group

Formular-Steuerelemente visuell zu EINER Einheit verschmolzen (components/input-group.css) - geteilte Rahmenlinie statt Lücke, nur die äußeren Ecken rund. Zwei Fälle: Feld + Button (Suchleiste) und mehrere Felder nebeneinander (Vorname/Nachname).

Barrierefreiheit: placeholder ist KEIN Ersatz für ein Label - verschwindet bei Eingabe, wird nicht von jeder Screenreader-Software zuverlässig als Feldname angekündigt. Jedes Feld braucht ein echtes <label>, bei Bedarf per .ncss-visually-hidden optisch versteckt. Das Label gehört dabei als Geschwister-Element VOR die .ncss-input-group, nicht als Kind hinein - sonst zählt es fälschlich als :first-child und die Eckenrundung landet auf dem unsichtbaren Label statt dem ersten echten Feld.

<label class="ncss-visually-hidden" for="search">Suchbegriff</label>
<div class="ncss-input-group">
  <input class="ncss-input" type="search" id="search" placeholder="Suchbegriff…">
  <button type="submit" class="ncss-btn ncss-btn--primary">Suchen</button>
</div>

<!-- Mehrere direkt verschmolzene Felder ohne Platz für ein sichtbares/verstecktes
     Sibling-Label je Feld: aria-label direkt am <input> ist hier die richtige,
     WCAG-konforme Technik (keine Strukturänderung der Input-Group nötig). -->
<div class="ncss-input-group">
  <input class="ncss-input" aria-label="Vorname" placeholder="Vorname">
  <input class="ncss-input" aria-label="Nachname" placeholder="Nachname">
</div>

Live-Suche

Vorschläge schon während der Eingabe, gruppiert und per Tastatur bedienbar (Pfeiltasten, Enter, Esc) - components/livesearch.css + js/livesearch.js, WAI-ARIA-Combobox-Muster. Diese Demo nutzt eine statische JSON-Datei im Client-Modus (data-mode="client"); im Normalfall liefert ein Server-Endpoint bereits gefilterte Treffer. Ohne JS bleibt es ein normales Suchformular. Probier z.B. „nav“, „farb“ oder „glass“.

<form class="ncss-livesearch" action="/suche/" role="search" data-ncss-livesearch="/api/suche">
  <label class="ncss-visually-hidden" for="q">Suche</label>
  <input id="q" class="ncss-input" type="search" name="q">
  <div class="ncss-livesearch-results" hidden></div>
</form>
<script src="dist/js/livesearch.js" defer></script>
// Antwort des Endpoints (GET /api/suche?q=...)
{
  "groups": [
    { "label": "Seiten", "items": [ { "title": "Kontakt", "url": "/kontakt/", "text": "Anfahrt und Öffnungszeiten" } ] }
  ],
  "all": "/suche/?q=..."
}

Switch

Natives <input type="checkbox">, per appearance:none neu gezeichnet - kein JS, kein Web Component nötig.

Range-Slider

accent-color für die Grundfarbe (wie Checkbox/Radio), Track/Thumb zusätzlich vereinheitlicht.

Datei-Upload

Der Input-Typ mit dem größten Cross-Browser-Unterschied - Chrome/Edge/Safari zeichnen einen eigenen Button + Dateiname, Firefox einen "Durchsuchen…"-Button. ::file-selector-button (+ ::-webkit-file-upload-button für ältere Safari-Versionen) bringt den Button auf dieselbe Optik wie .ncss-btn--secondary.

Weitere Feldtypen

Alle über dieselbe .ncss-input-Basisregel, mit gezielten Ergänzungen pro Typ dort, wo Browser eigene Pseudo-Elemente mitbringen (Farb-Swatch, Kalender-/Uhr-Icon, Lösch-Symbol bei der Suche).

<input list> + <datalist> - editierbares Textfeld MIT Auswahlliste (anders als <select>, das nur Auswahl ohne freie Eingabe erlaubt). .ncss-input greift ohne Sonderregel, da es generisch auf jedes <input> zutrifft. Die native Vorschlagsliste selbst ist reine Browser-UI - in keinem Browser per CSS stylebar. Mit dem opt-in js/combobox.js (hier eingebunden) wird sie durch eine echte, gestylte Dropdown-Liste ersetzt (Original-Markup unverändert, volle native Funktion bleibt ohne JS erhalten).

Gruppierte Felder

Natives <fieldset>/<legend> statt eines eigenen "Gruppe"-Bausteins - ohne eigene Klasse zu Ende gestylt (wie <blockquote> in base.css), der native 3D-Rahmen des UA-Stylesheets ist sonst der einzige verbliebene Stilbruch gegenüber den flachen ncss-Feldern.

Versand

Fortschritt, Messwert & Ergebnis

<progress> (eine laufende Aufgabe, z.B. der Upload oben) und <meter> (ein Wert innerhalb einer Skala, z.B. Speicherplatz) sehen ähnlich aus, bedeuten aber Verschiedenes - <meter> bleibt bewusst bei seiner eigenen Grün/Gelb/Rot-Bewertungslogik statt der Markenfarbe, das ist seine eigentliche Funktion. <output> für ein berechnetes Ergebnis.

Ergebnis: 42