|
|||
schau mal da, das geht derzeit nur via jquery und css:
myCheckbox beautiful checkboxes and radio buttons with css macht schöne checkboxes und radio buttons. relativ easy einzubauen. |
Sponsored Links |
|
||||
Natürlich geht das ohne Javascript und erst recht ohne jQuery, für moderne Browser reicht da CSS: Edit this Fiddle - jsFiddle
|
|
|||
Wahrscheinlich, weil das Element vom Betriebssystem zur Verfügung gestellt wird und die Browser es wohl nur durchreichen.
Zitat:
Für alle modernen Browser kann du auf CSS3 und das Pseudoelement :checked zurückgreifen. Aber Vorsicht, diese Methode funktioniert nicht im iOS und IE kleiner Version 9. Du erstellst ein Input Element als Checkbox. Dann nimmst du ein Label-Element, welches du an das Input bindest, wie nachfolgendes Beispiel zeigt. HTML-Code:
<input type="checkbox" id="check1" name="checkbox" /> <label for="check1" tab>Check Box 1</label> <input type="checkbox" id="check2" name="checkbox" /> <label for="check2">Check Box 2</label> Wir setzen das Label auf Block, damit unsere Checkboxen, untereinander erscheinen. Mit der Pseudo-Klasse :before erzeugen wir uns nun unseren Button, und der Ideen sind hier natürlich keine Grenzen gesetzt. Ich habe mal einen Kasten in Pink mit Roten Rahmen und abgerundeten Ecken entworfen. Den Curser stellen wir um auf Pointer. HTML-Code:
/* CSS */ input[type="checkbox"] + label { display: block; margin-bottom: 10px; } input[type="checkbox"] + label:before { content:" "; display:inline-block; width: 16px; height: 19px; font-size:17px; margin:-1px 4px 0 0; vertical-align: top; padding-left: 3px; cursor: pointer; border:1px solid red; border-radius:6px; background-color: pink; } Dazu verwenden wir die Pseudoklasse :checked auf unser Inputfeld und formatieren unser Label-Element so wie wir es haben wollen, wenn es angeklickt wurde. Ich habe hier aus der Unicode Zeichentabelle mal einen Haken ausgesucht und setze ihn auf Pink, wie die Hintergrundfarbe und die Hintergrundfarbe auf Blau, damit der Haken auch sichtbar wird. HTML-Code:
/* CSS */ input[type="checkbox"]:checked + label:before { background-color: blue; color:pink; Content:"✔"; } Habe jetzt erst bemerkt das Inta ähnliches gepostet hat.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. Geändert von explanator (10.06.2013 um 12:44 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Nur Mobile: Checkbox nach Wunsch stylen (Radius, Border, BG) | accessoire | CSS | 4 | 28.07.2011 19:23 |
Radiobuttons unterschiedlich stylen | jQuery | flipmode | Javascript & Ajax | 6 | 05.05.2011 21:41 |
div umgibt checkbox..jquery toggle um checkbox zu checken? | sepp88 | Javascript & Ajax | 7 | 12.01.2010 22:26 |
Checkbox :: 'Normalgröße' | lpvr | CSS | 3 | 10.10.2007 18:07 |
Über Checkbox gleichzeitig ein Textfeld aktivieren | Kalli 1976 | (X)HTML | 4 | 15.05.2007 17:32 |