Häckchenfarbe im Multiple-Choice

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

ich würde gerne die Farbe der Häckchen in der Multiple-Choice Frage zu Facebook & Co von Schwarz auf weiß oder Rot ändern.

Seite: http://www.fotoboxhamburg.com/?page_id=373

Habe es mit button {background-color:red;important!} versucht… aber das betrifft glaube ich eher die anderen Buttons… Versuch war es ja wert :slight_smile:

Wisst ihr wie ich die Farben in dem Bereich ändern kann?

Schöne Grüße
Christian

2

Checkboxen sind <input type=„checkbox“…> und eine einzelne Checkbox mit Beschriftung ist in der genannten Seite wie folgt eingebunden:

<div class="checkbox-inline">
    <label class="redNaoCheckBox-inline" for="radios-0">
        <div class="icheckbox_minimal" style="position: relative;">
            <input type="checkbox" class="redNaoInputCheckBox" name="rnField23" value="0" style="position: absolute; opacity: 0;">
            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
        </div>
        QR-Code
    </label>
</div>

Nachtrag: Hier noch etwas zu diesem Thema http://xhtmlforum.de/69524-checkbox-stylen.html

3

Die Checkboxen funktionieren auf meinem handy z.b. nicht. Das ist auch das problem mit solchen „basteleien“.

4

Funktionieren Checkboxen prinzipiell bei dir nicht oder nur die Basteleien nicht? Ich habe ein schon etwas älteres Cynus T2 mit Android 4.1 und verwende da den Chrome, da kann ich zumindest normale Checkboxen [de-]aktivieren.

5

Ich denke das muss man nicht so kompliziert machen. Schau dir mal diese Beispiele an:
https://media.kulturbanause.de/blog/2015/03/form-styling/form-styling.html
http://maddesigns.de/individuelle-checkbox-radio-inputs-1396.html

Moderation: Verschoben von HTML zu CSS.

6

Nur die auf dem vom TE genannten Seiten. „Normale“ Checkboxen gehen natürlich. Die von @threadi genannten auch.

Ich wollte nur auf das Risiko aufmerksam machen und das man sich gut überlegen soll, wie weit man seine Seite Browsersupported haben will.

7

Das ist ja auch gut so. Ich sehe nämlich nicht, wenn etwas die allgemeine Funktionalität unterbindet und würde es eventuell blind nachmachen und meist nur auf dem Windows PC mit Chrome, Firefox und Edge kurz testen. Dass ich mir mal meine Seiten auf dem Handy ansehe und gar Formulare teste, ist eher die Ausnahme. Und wenn, dann passiert das nur mit meinem Handy, denn auf iPhone oder Blackberry oder andere habe ich keinen Zugriff.

Bei den Links von Thready passiert scheinbar ähnliches wie bei der Änderung der Beschriftung des bei der Bootstrap JavaScript filestyle extension. Man blendet das eigentliche Feld aus und zeigt etwas anderes an, aber die Funktion des Ursprungsfeldes bleibt wegen Barrierefreiheit erhalten. Dieses Detail hat mir auch noch gefehlt, als ich aus Interesse die filestyle extension untersuchte.

8

Also erstmal vielen Dank für die regen Antworten!

Ich nutze für die Erstellung der Formulare Smartforms (WP-Plugin). Das CSS kann ich über folgendes Feld (Bild angefügt) verändern.
Nach einigem probieren, habe ich festgestellt, dass die Checkboxen funktionieren, aber die Häkchen nicht zu sehen sind (schwarz auf schwarzem Hintergrund). Dies sieht man z.B. daran, dass in der Mail, die ich erhalte, einige Felder aus den Checkboxen ausgewählt bzw. abgewählt sind.

Wie mache ich das über CSS?

9

Ich habe es jetzt über ein Dropdown-Menü geregelt… :slight_smile: Ich danke euch!