Die hier verwendeten Selektoren sind spezifisch für Wufoo-Markup, aber die zugrunde liegenden Konzepte können für jedes Formular verwendet werden. Die allgemeine Idee ist, dass Sie die Standard-Radio-Buttons und Checkboxen unsichtbar machen, indem Sie ihre Deckkraft auf null setzen, und sie durch Grafiken ersetzen. Verwenden Sie dann den :checked-Selektor, um die Grafiken zwischen ihren aktivierten und deaktivierten Versionen zu wechseln.
/*
Hide the original radios and checkboxes
(but still accessible)
:not(#foo) > is a rule filter to block browsers
that don't support that selector from
applying rules they shouldn't
*/
li:not(#foo) > fieldset > div > span > input[type='radio'],
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {
/* Hide the input, but have it still be clickable */
opacity: 0;
float: left;
width: 18px;
}
li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
margin: 0;
clear: none;
/* Left padding makes room for image */
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(off.png) left center no-repeat;
}
/* Change from unchecked to checked graphic */
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
background-image: url(radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
background-image: url(check.png);
}
Vielleicht könnten Sie einige Beispiel-HTML-Markup bereitstellen, das wäre hilfreich!
Großartig. Ich musste auf Javascript zurückgreifen, um die Magie zu vollbringen. Es gibt einige großartige Plugins online.
Wie ist die Browserunterstützung für diese Technik?
Ich habe neulich versucht, einen Weg zu finden, das zu tun!
Schöne Lösung, danke...
Die Wufoo-Blogseite besagt, dass es in IE9+ usw. funktioniert. Oberflächlich betrachtet sind die einzigen Teile, die ich sehe und die die Funktionsweise in IE7/8 verhindern, die :checked-Selektoren.
Diese Lösung zielt darauf ab, alles in CSS zu erledigen, aber wenn es Ihnen nichts ausmacht, ein kleines bisschen Javascript zu verwenden, könnten Sie :checked vielleicht simulieren, indem Sie dies mit Javascript erkennen und bei Bedarf eine zusätzliche CSS-Klasse auf die entsprechenden Elemente anwenden. Sie könnten also zum Beispiel die letzten beiden Regeln umschreiben als
Im Fall von Wufoo, da Benutzer keine eigenen Javascript hinzufügen dürfen, könnte Wufoo einfach ein wenig Javascript zu seinem globalen JS-Code hinzufügen, der auf jedem Formular gerendert wird... Es würde nicht wirklich schaden, dies zu tun, da Sie nur zusätzliche Klassennamen hinzufügen würden (z. B. class="field radio" wird zu class="field radio checked", wenn es ausgewählt ist).
Nur eine Idee!
Die CSS + winzige bisschen JS-Lösung ergibt für mich viel Sinn, wenn Sie IE7/8-Unterstützung wünschen.
http://equalto0.wordpress.com/2013/12/31/free-plugin-for-custom-input-type-checkbox-and-radio-js-small-plugin-custom-input-vs3/
Vielleicht finden Sie das nützlich. Funktioniert sogar auf IE7, 8.
:-D
Diese Lösung klingt vielversprechend – ich werde das ausprobieren, wenn ich nach Hause komme, da ich noch keine gute Methode gefunden habe, um benutzerdefinierte Checkboxen zu realisieren. Ich wünschte, HTML5 hätte dies einfacher gemacht...
Hallo Alex, Sie können das oder Less ausprobieren: http://equaltozero.ro/jquery-custom-form-v2-custom-input-type-checkbox-radio-and-custom-select-plugin/
Sie könnten auch :before und :after Pseudoelemente verwenden, um das Auswählen/Abwählen statt mit Bildern zu gestalten. Schönes Snippet, aber.
Ich möchte eine leicht andere Version dieses fantastischen Tricks teilen.
Das ist das HTML
Und das ist das CSS
Beachten Sie, dass ich einen negativen
margin-leftverwendet habe, um das Label vom Kontrollkästchen (oder Radio-Button) überlappen zu lassenLassen Sie mich wissen, wenn es Fehler gibt...
Hallo RobertoT,
Es funktioniert in Chrome und Firefox, aber in IE hat es etwas oberes Padding. Danke trotzdem.
**Danke **
Ich habe dies auf einer mobilen Website implementiert, an der ich arbeite. Es scheint, dass iOS Safari und Android Browser den Abstand zwischen mehreren Eingaben und Labels nicht gleich rendern. Im großen Browser sieht der Abstand wie erwartet aus und Sie klicken auf das Label, um die Aktion auszulösen. Auf den erwähnten Mobilgeräten wird durch Klicken oberhalb des Labels die Aktion ausgelöst.
Dies scheint daran zu liegen, dass die Höhe des nativen Kontrollkästchens den Abstand beeinflusst. Ich frage mich, ob andere ebenfalls Schwierigkeiten hatten, dies auf Mobilgeräten zu implementieren, oder ob es Ideen gibt, in welche Richtung man gehen soll, um das Problem zu beheben.
Versuchen Sie das Brian: http://equaltozero.ro/jquery-custom-form-v2-custom-input-type-checkbox-radio-and-custom-select-plugin/
Können Sie mir das HTML für dieses CSS zeigen?
Schön.
Ich habe ein weiteres schönes Beispiel gefunden, um benutzerdefinierte HTML-Checkbox-Steuerelemente mit CSS zu gestalten. Bitte sehen Sie sich den folgenden Link an, ich hoffe, er wird nützlich sein.
http://www.etechpulse.com/2014/02/on-off-custom-html-checkbox-css-in.html
Danke
Ich möchte das Hintergrundbild eines einzelnen Radio-Buttons ohne Label ändern.
Konnten Sie dafür eine Lösung finden?
Ich liebe es, das Häkchen ✓ für Checkboxen und Kreise ● und ○ für Radio-Buttons zu verwenden, wie hier gezeigt http://jsfiddle.net/rLo64zaw/ und hier vereinfacht
Was ist Ihr Eindruck?
http://findnerd.com/list/view/Custom-checkbox-using-jquery/1209/
ein einfaches Beispiel für benutzerdefinierte Checkboxen