zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden checkbox stylen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.06.2013, 10:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2013
Beiträge: 1
cssnew befindet sich auf einem aufstrebenden Ast
Standard checkbox stylen

irgendwie gibts da wenig moeglichkeiten. wieso ist das so und was kann an machen? gibts gute hacks?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.06.2013, 10:47
Neuer Benutzer
neuer user
 
Registriert seit: 16.04.2010
Beiträge: 5
smartexport befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.06.2013, 11:42
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Natürlich geht das ohne Javascript und erst recht ohne jQuery, für moderne Browser reicht da CSS: Edit this Fiddle - jsFiddle
Mit Zitat antworten
  #4 (permalink)  
Alt 10.06.2013, 12:40
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von cssnew Beitrag anzeigen
irgendwie gibts da wenig moeglichkeiten. wieso ist das so
Wahrscheinlich, weil das Element vom Betriebssystem zur Verfügung gestellt wird und die Browser es wohl nur durchreichen.

Zitat:
und was kann an machen? gibts gute hacks?
Ja, gibt es.
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>
Danach wird mit CSS das Input-Element ausgeblendet. Es bleibt also nur das Label-Element sichtbar.
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;
}
Jetzt heisst es nur, der neuen Checkbox ein bisschen Leben einzuhauchen.
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:"✔";
}
Edit:
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)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:29 Uhr.