type="checkbox" auf "radio" ändern mit CSS Anweisung... Custom-CSS aber wie?

    Moin,

    soo - ich werde hier noch zum Webentwickler. Ich habe ein Stück Code auf meiner Webseite (Freiheitenwelt.de/kasse) mit dem in Safari intergrierten Entwicklungstool analysiert und eine eckige Checkbox durch eine runde getauscht. Soweit so gut.. Kein großes Ding!

    Da der dazugehörige Code von einem Widget erzeugt wird, dachte ich mir es wäre sinnvoller das ganze über ein Custum-css anzupassen. Nun hab ich das also nach meinen Wünschen geändert und frage mich, wie ich so eine CSS Anweisung nun genau aufbauen muss?!?

    Geändert hab ich diese Zeile.

    Code
    <input type="checkbox" class="input-checkbox" name="legal" id="legal">


    in diese

    Code
    <input type="radio" class="input-checkbox" name="legal" id="legal">


    Das ganze steht in einer Class..

    Code
    <p class="form-row legal terms">

    Hier noch ein Screenshot dazu! Unter der Radio-checkbox seht ihr noch eine zweite wie es vorher war - warum das nicht richtig angeordnet wird weiß ich natürlich auch nicht. Bestenfalls sollte alles untereinander sein. Ich hatte sowas schon einmal mit einem widget. Da hatte ich alles in ein "label" gepackt - direkt im php code. Aber das unterliegt ja nicht den launen des Autors wie bei dem Plugin hier. Will ja nicht nach jedem Update das neu anordnen müssen.

    Vielen Dank!

    P.S: Falls das jemand durchspielen will. Der Shop läuft grad noch als Test. D.h. da passiert nix falls ihr auch da bis zur Kasse durchklickt.

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von Wordleo

    warum das nicht richtig angeordnet wird weiß ich natürlich auch nicht.


    "checkbox" bekommt per css einen negativen margin-left, den "ratio" nicht bekommt. Dann kommt noch dazu, dass die obere Checkbox in einer UL steckt die padding bekommt und unten die nicht.

    Code
    input[type="checkbox"] {
    float: left;
margin-left: -20px;
}

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Moin moin,

    ja da hast du recht! Wenn ich das

    Code
    float: left;

    deaktiviere wird alles sehr schön dargestellt und ich brauch nicht einmal auf die "Radios" umschalten.

    Nun ist es so, dass sich diese Styleänderung leider Global auswirkt und mir meine Checkboxen in der Newsletteranmeldung zerschießt. ;-( Diese musste ich auch nachkorrigieren. Dort hatte ich den php code in ein <label></label> gesetzt.

    Nun die Frage:

    Wie kann ich dass CSS anpassen, so das nur die Checkboxen für den Shop betroffen sind und die vom Newsletterwidget nicht.?

    Lg

    Martin

    Mon nochmal!

    Habs hinbekommen! Hehe - bin ja richtig stolz auf mich! Ging ganz einfach über das label .legal

    Code
    .legal label input[type=checkbox] { float: none; }

    Glaub so langsam kapier ich wie der Hase im CSS läuft.

    Schönen Gruß

    Zitat von Wordleo

    ........

    Glaub so langsam kapier ich wie der Hase im CSS läuft.

    .....

    :-) je genauer die "Adresse" desto weniger "global" wirkt es und CSS ist so demokratisch :-)
    alles was unten steht in der Datei schlägt das was weiter oben steht ...

    quasi ganz echtes: die letzten werden die ersten sein ... oder so ..

    Gut... scheinbar doch noch nicht ganz durchgestiegen.

    Auf einer anderen Seite https://freiheitenwelt.de/mein-konto/ gibt es noch einmal ne Checkbox.

    Diese ist wie folgt definiert:

    Code
    <input name="rememberme" id="rememberme" value="forever" type="checkbox">

    .


    Nun hatte ich wie mir folgenden CSS für das Stylesheet geschrieben:

    Code
    .rememberme label input[type=checkbox] { margin: 10px 6px 12px 0px; }

    Tut aber nicht!

    P.S: das margin hab ich im Entwickelmodus vom Safari und Firefox getestet - das passt... Nur mit der ID stimmt nun was nicht.

    Schönen Gruß

    mit einem Punkt sprichst du eine CSS Klasse an
    mit der Raute eine CSS ID
    wenn rememberme eine ID ist dann geht das so

    HTML
    #rememberme ......

    0 braucht weder px noch em noch %, Null is einfach Null :-)


    dein Zertifikat wird vom Firefox nicht anerkannt

    Hi

    Das mit dem # bringt leider die Lösung nicht. Hatte das auch schon vorher probiert. ?!? Versteh das nicht!

    Code
    #rememberme input[type=checkbox] { margin: 10px 6px 12px 0; }


    Am Zertifikat bin ich grad am arbeiten. Weiß noch nicht ob ich das von meinem Hoster nehme oder mir was anders besorge. Bin mich grad am einlesen diesbezüglich.

    Schönen Gruß

    Martin

    der input type Checkbox hat doch die id rememberme

    du deklarierst diese id als stünde sie vor diesem Input


    HTML
    input#rememberme { margin: 10px 6px 12px 0; }

    Hey

    Ok - Vielen lieben Dank! Das wars... Der Unterschied zwischen Label und id ist mir noch nicht so klar...

    Bei den anderen Checkboxen war der Syntax ja so... .

    Code
    .legal input[type=checkbox] { float: none; }


    Man lernt halt immer dazu...

    Nun siehts erstmal gut aus soweit... Noch die Sache mit dem Zertifikat und dann wird der Shop erstmal noch gefüllt.

    ;-) Da freu mich drauf!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden