Hallo ejbm,
danke für deinen aufmerksamen Vorschlag!
Ganz kurz:
Dein möglicher Bug ist ein Feature.
Den ganzen Rest erledigst du mit passenden CSS-Selektoren.
Hintergrund:
Es gibt 3 Stellen für die bei Formular-Feldern eigene CSS-Klassen gesetzt werden können:
- Option ‘CSS Klasse Control-Gruppe’
- Option ‘CSS Klasse für Bezeichnung’
- Option ‘CSS Klasse des Feldes’
Im Grunde würde sogar diese eine Stelle bereits ausreichen:
- Option ‘CSS Klasse Control-Gruppe’
Denn diese 3 Stellen dienen nur als bequeme Anker bzw. Einstiegspunkte für deine CSS-Selektoren.
Alles was an HTML-Elementen neben oder unterhalb dieser Einstiegspunkte liegt, kannst du mit CSS-Selektoren beliebig genau adressieren bzw. treffen.
Und das gilt selbst für das kleinste Mauseloch, für das ein Style-Attribute festgelegt werden soll.
Diese 3 möglichen Stellen für eigene CSS-Klassen für ein Formular-Feld sind also bereits das notwendige Feature.
Alles weitere liefert dir das CSS mit seinen leistungsfähigen Selektoren.
Und wenn du schon dabei bist, eigene CSS-Klassen zu definieren und dich soweit zumindest auskennst, dann befinden sich die CSS-Selektoren automatisch auch in der Tool-Kiste.
Ein konkretes Beispiel:
Im Falle des Radio-Feldes haben das Radio-Feld und alle seine Radio-Feld-Optionen eine Bezeichnung (<label> Element).
Deine Klasse aus der Option ‘CSS Klasse des Feldes’ landet bei allen Bezeichnungen (<label> Elementen)
Das Radio-Feld im Formular:
vi-solutions.de/forum-uploads/radio-fiel...al-button-labels.png
Feld-Konfiguration, Reiter 'Layout':
CSS Klasse Control-Gruppe = my-control-class
CSS Klasse für Label = my-label-class
CSS Klasse des Feldes = my-field-class
Der CSS-Teil in den FEWAs:
Im folgenden CSS wird mit CSS-Selektoren beispielhaft für ein Radio-Feld unterschieden zwischen den folgenden Label-Gruppen:
- Das Feld-Label und alle Options-Label (Fettdruck).
- Nur das Feld-Label (Blau).
- Alle Options-Label (Kursiv).
- Label der ersten Option (Rot).
- Label der weiten Option (Orange).
- Label der dritten Option (Grün).
Code:
/* field label and all input-button labels */
.my-label-class {
font-weight: bold;
}
/* field label */
.form-group > .my-label-class {
color: blue;
}
/* input-button label: all options */
.form-check-label.my-label-class {
font-style: italic;
}
/* input-button label: first option */
.my-control-class .form-check:nth-of-type(1) .my-label-class {
color: red;
}
/* input-button label: second option */
.my-control-class .form-check:nth-of-type(2) .my-label-class {
color: orange;
}
/* input-button label: third option */
.my-control-class .form-check:nth-of-type(3) .my-label-class {
color: green;
}
Es gäbe noch viele andere Möglichkeiten für diese CSS-Selektoren, die alle das gleiche erreichen.
Die verschiedenen Möglichkeiten unterscheiden sich hinsichtlich Geschmack, Gewohnheit, Erfahrung, Komplexität und möglichen Nebeneffekten.
Es würde sogar ganz ohne eigene CSS-Klassen gehen (Feld-ID im Selektor verwenden).
Mit den eigenen CSS-Klassen bleiben die CSS-Selektoren aber in der Regel deutlich einfacher.
Gleiches geht selbstverständlich auch für die <input>-Elemente sowie alles andere.
Du musst dir nur die HTML/CSS Struktur anschauen, um zu sehen, was möglich ist.
Liebe Grüße, Ingmar
I recommend you the new and up-to-date documentation for Joomla 4:
.
