Checkboxen selber gestalten

  • Habe mal gesehen das man Checkboxen,Radiobuttons ,textfelder und Buttons selber gestalten kann.

    Mit Buttons und Textfelder kriege ich es etwas hin,aber auch nicht gut.

    Würde gerne Selectmenüs und Checkboxen gestalten,aber verstehe nicht wie das geht.

    Ich kann es zwar schön bunt machen,aber ich kann mit Javascript nicht drauf zugreifen.

    Beim Seitenreload behält er den Hacken auch nicht.

    Kann mir mal einer ein Beispiel geben?

    Danke!!

  • Bei Checkboxes ist es relativ einfach, wenn man den Checkbox-Hack anwendet: Einer Checkbox kann man ein Label zuordnen. Die Checkbox wird unsichtbar gemacht. Klick auf das Label steuert den Zustand der Checkbox. Zustand der Checkbox steuert das Aussehen des Labels.

    https://jsfiddle.net/Sempervivum/3dyrdo07/1/


    Bei Selects ist es leider nicht so einfach. Hier ist es eher empfehlenswert, ein Select mit CSS und Javascript neu zu bauen. jQuery-UI hat z. B. so etwas:

    https://jqueryui.com/selectmenu/

  • Ok das erklärt mir schon einiges.

    Aber wie schaffe ich es das er den check behalten tut,wenn ich eine Seite reloade?

    Das mit den Selectmenü das verstehe ich noch nicht,aber ich lese weiter.;)

  • ich suche hn mal gerade was raus,bzw versuche mal selber ein select zu gestalten.


    aber jetzt mal nee frage habe das hier

    https://codepen.io/maggiben/pen/ubHiy


    versucht in fiddel rein zu lopieren weil ich mit fiddel besser klar komme.

    aber verstehe nicht warum ds nicht läuft.habe alles eingebunden und 1 zu 1 kopiert.

    muss man da noch irgendwaas einstellen was ich noch nicht kenne.

    hier die fiddel kopie

    EDDIT : fiddel läuft jetzt

    *** Link entfernt, weil nicht mehr erreichbar ***

  • also "View compiled CSS" steht bei mir nicht.

    Du meinst bei fiddel in den css fenster. dann auf das zahnrad und dann steht da einmal css und scss. dann kann ich noch ein hacken bei "Normalized CSS" reinmachen und das wahrs.mehr auswahl habe ich da nicht und das habe ich schon alles durchversucht..habe bei codepen ja auch gesehen das die viel mehr auswahl haben,auch html und so.

    aber wieso habe ich "View compiled CSS" den nicht ,so blind kann ich doch nicht sein

  • Zur info habe meinen fiddel link oben geändert mit der funktionierenden select menü,fals es ein interesiert..


    jetzt mal zu codepen..was macht coppen den mit den code ,das man den erst umwandeln muss.

    weil optisch kann ich da jetzt auf der schnelle kein unterschied finden,was ist den da los.


    was ist "scss"? auch irgendwas umcodiertes? weil andere befehle wie im normalen"css" kann man da auch nicht finden.

    es gibt schon so viele programiersprachen ,der ganze unicode kram und was weiss ich alles,und dann wird an die schöne CSS auch noch rumgefummelt;(

  • scss ist ebenfalls ein Precompiler und das CSS muss kompiliert werden. Ich habe um diese ganzen Precompiler bisher einen Bogen gemacht. Sie haben insofern eine Berechtigung, weil die Möglichkeiten von CSS sehr begrenzt sind, es gibt z. B. keine Variablen, keine Funktionen und Rechenoperationen nur in sehr eingeschränkter Form (calc).

  • Die machen alles komplizierter als sein muss.vor 30 jahren oder so gab es 2 sprachen oder so und jetzt kommt jedes jahr was neues oder so ähnlich.


    derneue2017.

    also das selectmenü soltest du so machen wie sempervivum es sagte,ist zwar etwas komplizierter aber ist mehr möglich.

    ich habe mal mit den normalen selectmenü rumgespielt und mal geguckt was man da so machen kann mit CSS alleine.

    *** Link entfernt, weil nicht mehr erreichbar ***


    Es gibt bestimmt noch paar Sachen, die man ändern könnte, aber so hast du ein kleiner Überblick was ohne aufwand ,und mit den herkömmlichen selectmenü schnell gemacht ist..

  • Super,jetzt weiss ich wie man Checkboxen ,Radiobuttons und selectmenü ändern kann.

    Ich nehme mal an das es bei Textfeldern genau so geht,oder liege ich da Falsch?

    Ihr habt mich mit euren Alert gerede auf eine Idee gebracht.

    Ich möchte mir sowas auch bauen und dazu brauche ich Select und Checkboxen im Alert.

    Geht das ?


    Dann noch was,ist das mit Googel charts schwer?

    Möchte im Alert solche Grafiken anzeigen lassen,und habe mir gedacht das es für meine zwecke wahrscheinlich am einfachsten ist.

    Kennt sich jemand damit aus?

    Ist das auch möglich sowas im Alert anzuzeigen?

    Ich weiss Fragen über Fragen ,aber ichbin neu auf diesen Gebiet und weiss nur das was ich mir zeigt,bzw was ich gelesen habe und durch selbstversuche.

  • Den Pfeil kann man weg machen und mit Bild ersetzten,aber farbe wechseln oder so geht, glaube ich nicht ,ich wüste zumindest nicht wie.

    Hier Version mit Pfeil Bild

    *** Link entfernt, weil nicht mehr erreichbar ***


    bei den beispiel kann man mal sehen das firefox und opera 2 verschiedene selectboxen anzeigt.

    Warum der unterschied so gross ist weiss ich auch nicht

  • sorry.mit einen kleinen trick kannst du den Pfeil mit irgendwelcher anderen tastertur Zeichen belegen.

    habe jetzt das "V" genommen weil es den pfeil am nächsten kommt. esgibt auch ein pfeil nach unten zeichen aber das finde ich nicht und den code dafür auch nicht. Ehrlich gesagt weiss ich auch nicht wie das geht weil der code immer als zahl angezeigt wird und nicht als pfeil.


    *** Link entfernt, weil nicht mehr erreichbar ***

    Hier kannst dudenpfeil nee andere farbe geben und auch den Backgrund verändern.


    Ist mtlerweile ne menge css code geworden für ein paar optische veränderungen.da sollte man echt drüber nachdenken ob es den aufwand wert ist

  • Das ist gut.Man kann die ScrollBalken doch auch ändern oder nicht? Geht das auchmit Css.Habe es versucht und nur mittelmässigen erfolg erzielt.Vieleicht könnt ihr mir da auch noch so ein Beispiel machen.?

  • Das ist gut.Man kann die ScrollBalken doch auch ändern oder nicht? Geht das auchmit Css.Habe es versucht und nur mittelmässigen erfolg erzielt.Vieleicht könnt ihr mir da auch noch so ein Beispiel machen.?

    ja da kann man auch ein bischen dran rum spielen.ich versuche das mal ,mal kucken was da so geht .

    so habe ich zumindest für heute eine aufgabe:)

Jetzt mitmachen!

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