Andreas: Radiobuttons individuell gestalten ... ?

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.

  1. 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

    1. 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.

      1. 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!

        1. 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

          1. 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.

            1. 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

              1. 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