Radiobuttons individuell gestalten ... ?
Andreas
- css
Ist es möglich Radiobuttons eines Formulars individuell zu gestalten, also beispielsweise die Farbe des (zunächst schwarzen) Punktes zu verändern ?
Ich hoffe mit der Wahl des Themenbereichs nicht völlig daneben zu liegen. Vielleicht lässt sich das Problem ja durch Erstellung eines CSS lösen ...
Vielen Dank für Eure Hilfe.
Ist es möglich Radiobuttons eines Formulars individuell zu gestalten, also beispielsweise die Farbe des (zunächst schwarzen) Punktes zu verändern ?
So viel ich weiß, nicht. Ich habe schon mal gesehen, daß die Radiobuttons mit Bildern simuliert wurden, die per JavaScript ausgetauscht wurden, um einen individuellen Effekt zu erzielen.
Davon würde ich aber im Allgemeinen abraten ...
Grüße,
Sebastian
Vielen Dank für Deine Antwort. Auch wenn Du vom Einbau von Grafiken anstelle von herkömmlichen Buttons abrätst - weißt Du noch, wo genau Du das gesehen hast ? So könnte ich mir nämlich mal den benötigten HTML-Code zu Gemüte führen.
Hallo, Andreas, << Anrede
Auch wenn Du vom Einbau von Grafiken anstelle von herkömmlichen Buttons abrätst
in erster Linie wegen des erhöhten Aufwands, der geringeren Performance und der ebenfalls nur mit einem gewissen Aufwand herzustellenden Kompatibilität. Wenn das alle keine Rolle spielt, bitte schön ...
weißt Du noch, wo genau Du das gesehen hast ?
Nein, aber mal eben gegoogelt ( http://www.google.de/search?q="create+customized+radio+buttons" ) und das gefunden (fertiges Skript mit Beispiel) ...
http://1ppl.free.fr/html/article018.html
Jetzt mußt Du nur noch gucken, wie Du den ausgewählten Wert per POST an das auswertende Skript übergibst. Außerdem würde ich noch einen noscript-Bereich mit "richtigen" Radiobuttons einfügen.
Viel Spaß, Grüße,
Sebastian
Poste oder schicke doch bitte mal Deine fertige Lösung, wenns klappt!
Hallo, Andreas,
noch ein Tip zu dem Skript: schreibe hidefocus in die a-tags, damit die gestrichelten Linien um das Bild, das jeweils den Focus hat, verschwindet.
http://www.larskasper.de/webdesign/tips/linkrahmen/
http://forum.de.selfhtml.org/archiv/2002/4/8965/
Grüße,
Sebastian
Ich bin mir leider nicht sicher, ob das untenstehende Codebeispiel tatsächlich funktionstüchtig ist, weil ich das Formular bereits einige Male testweise über einen kostenlosen Provider verschickt habe, der mir jetzt, da ich denke, es müsste klappen, nicht mehr erlaubt, es heute nochmal zu probieren.
Head:
<script type="text/javascript">
var checkedButton=-1 // No button is checked by default
var rbValues=new Array()
rbValues[1]="Value1"
rbValues[2]="Value2"
rbValues[3]="Value3"
rbValues[4]="Value4"
function checkButton(buttonId) {
// Uncheck any checked button
if (checkedButton!=-1) {
document.images["rb_" + checkedButton].src="button_up.jpg"
}
// Check clicked button
document.images["rb_" + buttonId].src="button_down.jpg"
// Store clicked button ID
checkedButton=buttonId
// Store new value to submit
document.beispiel.valueToSubmit.value=rbValues[buttonId]
}
</script>
Body:
<form action="http://go4xml.com/formmail.php" name="beispiel" method="POST" enctype="multipart/form-data">
<b>
<input type="hidden" name="recipient" value="adresse@domain.com">
<input type="hidden" name="subject" value="Feedbackformular">
Option 1 <a href="#" onclick="checkButton(1)" onfocus="this.blur()"><img name="rb_1" src="button_up.jpg" border="0"/></a>
<p>Option 2 <a href="#" onclick="checkButton(2)" onfocus="this.blur()"><img name="rb_2" src="button_up.jpg" border="0"/></a> <p><b>
<input type="hidden" name="valueToSubmit"><input
</p>
border="0" src="vote.jpg" name="Submit" onfocus="this.blur()" width="24" height="7" type="image">
</b></p>
</form>
Vielen Dank für Deine Hilfe.
Hallo, Andreas,
Ich bin mir leider nicht sicher, ob das untenstehende Codebeispiel tatsächlich funktionstüchtig ist, weil ich das Formular bereits einige Male testweise über einen kostenlosen Provider verschickt habe, der mir jetzt, da ich denke, es müsste klappen, nicht mehr erlaubt, es heute nochmal zu probieren.
Das verstehe ich nicht - und was willst Du denn nun genau wissen?
Grüße,
Sebastian
Es ist alles in Ordnung, das Formular funktioniert. Weil Du mich in Deiner Nachricht gebeten hast ein fertiges Beispiel zu posten, hab ich halt gedacht, Du wolltest den Code sehen.
Und was den Provider betrifft: Es lassen sind nicht unbegrenzt viele Formulare verschicken, sodass ich es gestern nicht mehr ausprobieren konnte.
Gruß
Andreas