<we:userInput type="checkbox" nicht per CSS beeinflussbar?

Fragen zu CSS.
Fragen zu we:Tags bitte im Forum webEdition Templates erstellen (we:Tags) posten.
mediavantis
Senior Member
Beiträge: 238
Registriert: Do 16. Feb 2012, 12:51

<we:userInput type="checkbox" nicht per CSS beeinflussbar?

Beitragvon mediavantis » Mi 26. Jun 2019, 11:05

Hallo Gemeinde,
ich arbeite derzeit an Formularen für das Frontend, in denen diesemal auch UserInputs vom Typ Checkbox und Radio vorkommen (Kunden-Profile).

Code: Alles auswählen

<we:userInput type="checkbox" id="blubb" name="Blubb" editable="true" value="0" /><label for="blubb"><span>Blubb</span></label>
An dem Stylen dieser Elemente beiße ich mir gerade die Zähne aus, denn sobald ich folgenden css-code verwende:

Code: Alles auswählen

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label {
    color:#000;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background: #ffffff;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background: #f00;
}
werden die Checkboxen im Formular gar nicht mehr angezeigt.
Die durch webEdition ausgelieferte Klasse "we we_unserinput" beinflusst das ganz offensichtlich so, dass man hier keine individuellen Möglichkeiten zu haben scheint.

Mit ist bekannt, dass man das u. U. umgehen könnte, indem man das ganze in ein

Code: Alles auswählen

<input type="checkbox">... hier der Wert über eine Variable ... /><label for="blubb"><span>Blubb</span></label>
packt, allerdings ist dann die Funktionalität [editable="true"] nicht mehr möglich, was aber unbedingte Voraussetzung ist, damit der Kunde im Nachhinein Änderunge vornehmen kann.

Hat jemand vielleich hier einen Lösungsansatz?

mokraemer
Senior Member
Beiträge: 3619
Registriert: So 8. Aug 2010, 01:23
Wohnort: Mainz

Re: <we:userInput type="checkbox" nicht per CSS beeinflussbar?

Beitragvon mokraemer » Mi 26. Jun 2019, 11:19

Hallo Ulrich,
genau das Gegenteil ist eigentlich der Fall. Du kannst per CSS über die WE Klassen das ganze extrem gut stylen.

Dein Fehler ist, das du davon ausgehst, das auf das input type="checkbox" ein label folgt und das stimmt so eben nicht!

Ich würde das an deiner Stelle (viel einfacher)

Code: Alles auswählen

<we:userInput type="checkbox" id="blubb" name="Blubb" editable="true" value="0" /><label for="blubb" class="we_userinput checkbox"><span>Blubb</span></label>
schreiben. (warum eigentlich noch ein span im Label?!)
Dann kannst du per css einfach:

Code: Alles auswählen

input.we_userinput[type="checkbox"]{....}
label.we_userinput.checkbox{....}
machen.
webEdition-Kern-Entwickler

mediavantis
Senior Member
Beiträge: 238
Registriert: Do 16. Feb 2012, 12:51

Re: <we:userInput type="checkbox" nicht per CSS beeinflussbar?

Beitragvon mediavantis » Mi 26. Jun 2019, 13:47

Hallo Marc,

da hätte ich selbst drauf kommen können, aber wie das so ist, irgendwann siehst du den Wald vor lauter Bäumen nicht mehr.
Recht herzlichen Dank. Das bringt mich schon mal viel weiter.


Zurück zu „CSS“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 5 Gäste