Radio und Checkbox Button unsichtbar, dafür ein Bild gerahmt

    Hi,


    ich habe für unsere Webseite einige Formulare zusammengeklickt mit RSForm. Das funktioniert auch alles. Ich würde es aber gerne optisch etwas aufbereiten, komme aber mit meinem angerosteten HTML&CSS Kennen nicht weiter. Ich habe zu jedem Punkt ein Bild angefügt. Ich hätte eigentlich gerne, dass der Radiobutton nicht erscheint und dafür um den Text/Bild z.B. ein Rahmen erscheint. Weiß leider nicht wie man das ansteuert, damit man das mit CSS ggf. hin bekommt. Evtl. hat hier jemand einen Tipp für mich? Danke!


    Zum Formular/Webseite

    Hallo Loschdi,


    Probier mal: Radiobutton weg:

    Code
    #rahmen0, #rahmen1, #rahmen2 {
display:none;  
}

    Rahmen herum inkl. Text:

    Code
    .uk-width-1-3 {
border:3px solid #dcad61; 
padding:10px; 
}

    müsste noch zurechtgestutzt werden (wegen der Abstände).


    Rahmen herum ohne Text:

    Code
    .uk-width-1-3 img {
border:3px solid #dcad61;  
}

    Liebe Grüße

    Christine

    Danke christine2 . Das passt soweit.


    Hatte aber vergessen zu erwähnen, dass nur der aktive Punkt dann einen Rahmen erhalten soll. Sorry. Hatte gedacht, dass ich im QUellcode eine active Klasse oder ähnliches finde die hinzugefügt wird. aber leider finde ich nix.

    Danke chr-hl daran hab ich noch gar nicht gedacht. Hab mir dann nochmal den Quelltext angeschaut. Da ist aber gar kein a-Tag dabei. <label> oder <input> aber da wird keine Pseudo-Klasse (heißt das so?) angefügt? Oder ich übersehe etwas.

    Danke nochmals. Das habe ich getestet. Hover funktioniert. Allerdings bleibt der Rahmen nicht stehen bei einer Auswahl, da durch das aktivieren einer Auswahl keine neue klasse oder ähnliches erzeugt wird die man ansteuern könnte. Ich möchte ja, dass der ausgewählte Punkt einen Rahmen erhält und dieser auch sichtbar bleibt.

    Ohne JavaScript lässt sich das, was du haben willst, nicht machen. Du kannst per CSS nicht das Elternelement eines aktiven Radio-Buttons ansprechen. Du müsstest dir per JavaScript einen Event-Handler auf das change-Event des Radio-Buttons legen und je nachdem, ob er aktiviert oder deaktiviert wurde, dem gewünschten Elternelement die passende Klasse geben.

    Hi chr-hl das funktioniert. Aber bei der nächsten Aktion ist es wieder weg. Das wird wohl so sein wie Harmageddon sagt. JS kann man jedem Formular hinzufügen. Dafür gibt es bei RSForm extra ein Feld. Allerdings kann ich kein JS. Dann werde ich hier ohne Hilfe nicht weiterkommen. Ist das ein großer Aufwand Harmageddon ? Sonst kann ich auch mal beim Support von RSForm nachfragen ob die evtl. etwas in der Schublade haben?


    Ist ja eher eine optische Sache. Ich finde es so einfach übersichtlicher wenn da ein Rahmen drum ist als wenn nur der Radio oder Checkbox-Button ausgewählt ist.


    Danke euch allen

    bembelimen danke für den Tipp. Damit sieht es gut aus. Gibt es hier ein nachteil, weil Harmageddon geschrieben hat, dass es eigentlich nur per JS geht? z.B. das es nur mit ganz aktuellen Browsern oder ähnlichem funktioniert? Ansonsten ist das ne super Lösung.

    Zitat von Loschdi

    bembelimen danke für den Tipp. Damit sieht es gut aus. Gibt es hier ein nachteil, weil Harmageddon geschrieben hat, dass es eigentlich nur per JS geht? z.B. das es nur mit ganz aktuellen Browsern oder ähnlichem funktioniert? Ansonsten ist das ne super Lösung.

    Das klappt einwandfrei in allen Browsern auch ohne JS, da es sich bei dem img um ein Element auf der gleichen Ebene wie der Radio-Button handelt. Das kann durch den ~-Operator angesprochen werden. Mein Kommentar bezog sich nur auf Elternelemente, da es zuvor darum ging.