[3.3] Checkbox

[Bennybär]

Hallo liebes Forum,

als "Unwissender" möchte ich eine Frage zu den Checkboxen stellen.
Meine Forenseite läuft im Moment nur in einer Probeversion mit xampp auf meinem Rechner. Nun habe ich das Layout nach meinem Geschmack angepasst. Dabei stört mich eigentlich das Aussehen der im Bild eingekreisten Checkboxen.
[ externes Bild ]
Nun die Frage: ist es überhaupt möglich, die Farbe und die Form dieser Boxen zu verändern? Oder ist sowohl Farbe und Form browserabhängig?
Vien Dank für Eure Antworten.

[IMC]

Ja, das geht.
Mit einer Google-Suche findest du viele Beispiele.

[Bennybär]

Hallo, Thorsten,
danke für die Antwort. Aber leider komme ich trotzdem nicht weiter. Wonach muss ich denn da genau suchen? Bin noch Neuling auf dem Gebiet.
Gruß Bernhard

[Joe Kolade]

Mit den Stichworten "Checkboxen oder Radiobuttons via CSS" solltest du über eine Suchmaschine weiterführende Infos finden.
Das Thema ist aber relativ komplex und erfordert einige Einarbeitung.
Vielleicht teilst du mal mit, in welche Richtung deine Vorstellungen gehen?!

Gruß Joe

[Bennybär]

Hallo Joe,
vielen Dank für Deine Antwort. Werde heute abend mal die Suchmaschinen quälen.
Um die Frage nach meinen "Vorstellungen" zu beantworten, wäre es schön, wenn ich die Buttons farblich an den Hintergrund (style ist greengolden) anpassen könnte, also irgendeine Farbvariation von "Gold", und das zu setzende Häkchen in Grün, entsprechend der Schriftfarbe.
Da ich noch nicht in der Programmierung von css sehr weit fortgeschritten bin, wäre ich über ein paar Informationen zum Code sehr dankbar. Darüber hinaus ist es mir auch noch nicht gelungen, in welcher der vielen css-Dateien von phpbb ich überhaupt den Eintrag über die Buttons finden kann.
Vielen Dank für die Mithilfe und einen lieben Gruß
Bernhard

[IMC]

Hallo Bernhard,

nur die Hintergrundfarbe der Checkbox zu ändern ist einfach.

Code: Alles auswählen

input[type="checkbox"] {
	accent-color: gold;
}

Füge diesen Code an das Ende der color.css deines Styles ein. Danach Browser und Foren Cache löschen.

Diese Änderung musst du nach jedem Update erneut einfügen.
Vergiss nicht vor jeder Änderung eine Sicherungkopie zu erstellen.

Wenn mehr geändert werden soll, wie zum Beispiel die Farbe des Harken wird es deutlich komplizierter.

[LukeWCS]

Hallo Bennybär

Ich habe die gleiche Einschätzung/Erfahrung wie Joe und Thorsten was Checkbox Styling angeht.

Nun die Frage: ist es überhaupt möglich, die Farbe und die Form dieser Boxen zu verändern?

Grundsätzlich ja, es gibt eine CSS Eigenschaft mit der man jegliches Styling quasi auf Null setzen kann. Aber das sehe ich eher kritisch weil:

Oder ist sowohl Farbe und Form browserabhängig?

Nicht nur vom Browser, sondern primär vom Betriebssystem, weil z.B. Checkboxen, Radio Buttons und normale Buttons sogenannte System Controls sind. Das heisst, wenn du da was änderst, kann es sein dass das dann für andere Benutzer nicht mehr so aussieht, wie sie es gewöhnt sind oder im System eingestellt haben. Denn primär das System generiert diese Controls, nicht der Browser. So jedenfalls mein Wissensstand.

Zuerst müsste wie erwähnt das Styling für die Checkbox komplett auf Null gesetzt werden und dann müsste wirklich das komplette Design von Grund auf selber erstellt werden. Und zwar für alle 3 möglichen Zustände einer Checkbox, das ist einiger Aufwand und nicht trivial, weil das dann auch in jedem Browser funktionieren muss. Darum hatte ich mich damals, als ich mich damit beschäftigte, ganz schnell entschieden, dass das Ergebnis nicht den Aufwand rechtfertigt. Allerdings sehe ich das auch mit den Augen eines Ext Entwicklers, der darauf achten muss, dass Exts möglichst überall funktionieren: Funktion hat immer Vorrang vor Optik.

[Kirk]

@Bennybär
Als ich für den phpBBDumper eine neue Benutzeroberfläche erstellt habe, hatte u. a. die Checkboxen per CSS geändert.
Hier mal der Code:

Code: Alles auswählen

input[type="checkbox"] {
	width: 12px;
	height: 12px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	outline: 1px solid gray;
	text-align: center;
	line-height: .9em;
	background: #373737;
	vertical-align: sub;
}

input[type='checkbox']:checked:after {
	content: '✔';
	color: #FFF;
	font-size: 11px;
}

Die ganzen Werte müsstest du nach deinen Wünschen ändern. Wie sich das ganze bei phpBB selbst verhält, hatte ich nicht getestet.

[Bennybär]

Ich möchte Euch allen ganz herzlich für's Mitdenken und die tollen Tipps danken. Ich werde so nach und nach einige Ratschläge ausprobieren und dann berichten.
Euch allen einen schönen Abend und bis bald einmal
Gruß Bernhard

[Bennybär]

Hallo zusammen,
zunächst einmal einen herzlichen Dank an Udo, der mir den entscheidenden Tipp zur Gestaltung meiner Checkboxen geliefert hat. Nach ein paar Anpassungen in der stylesheet - Datei des Styles sieht das Ganze (nach meinem Geschmack) sehr gut aus.
Hier mal ein Bild davon: https://i.postimg.cc/FKsv9cvb/Bild01.png

und hier der angepasste Code:

Code: Alles auswählen

input[type="checkbox"] {
	width: 14px;
	height: 14px;
	border-radius: 10%;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	outline: 1px solid;
	outline-color: #4F4103;
	text-align: center;
	line-height: .9em;
	background: #C8B668;
}

input[type='checkbox']:checked:after {
	content: '✔';
	color: #00783C;
	font-size: 14px;
	font-weight: bold;
}

input[type="radio"] {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	outline: 1px solid;
	outline-color: #4F4103;
	text-align: center;
	line-height: .9em;
	background: #C8B668;
}

input[type='radio']:checked:after {
	content: '✔';
	color: #00783C;
	font-size: 13px;
	font-weight: bold;
}

Wenn jemand den Code weiternutzen will, müssten die Farben nach Euren Vorstellungen noch angepasst werden.

Und last but not least hätte ich da noch eine Frage:
gibt es auch eine Möglichtkeit, die up- und down Buttons (siehe roter Kreis im Screenshot) farblich zu verändern? Und in welcher css - Datei finde ich den zugehörigen Code, um ihn anzupassen?
Euch allen vielen Dank für's Mitdenken.

Gruß Bernhard