Checkbox Farbe ändern bei onclick JavaScript/CSS?

Wie ändere ich die Farbe der Checkbox ?

Bei mir ist standartmäßig der background in einem blauton und der haken weiß.

Habe schon versucht zu googeln und dort stand das eine input type=checkbox kein richtigen hintergrund hat. Ist es nicht irgendwie möglich die Farbe bei "checked" grün zu stellen und beim nicht klicken rot.

3 Antworten

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

12.08.2021, 14:21

Die Checkbox hat keinen richtigen Hintergrund und folglich kann man auch die Farbe nicht ändern.

Aber du kannst mithilfe von ::after die komplette Checkbox neu gestalten. Damit ginge es.

/* Original Checkbox */
input[type='checkbox'] {
  appearance: none; /* Original Ausblenden */
  position: relative;
  cursor: pointer;
}

/* Neue Checkbox */
input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: red;
  border: 2px solid #666;
  border-radius: 4px;
}

/* Wenn checked */
input[type='checkbox']:checked::after {
  background-color: lime;
}

Beispiel: https://jsfiddle.net/hvLuc470/3/

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

RealG945tter

12.08.2021, 12:46

Verwende doch eine Listbox?

Da kriegst du den Farbcode direkt mit dazu ohne was zu neu zu programmieren :)

Tausche #fffff dann gegen die gewünschte HTML Hex Color aus!

Woher ich das weiß:Berufserfahrung – Arbeite in der Programmierung

MrAmazing2

12.08.2021, 14:11

Eine Listebox ist was komplett anderes als eine Checkbox ...

RealG945tter

12.08.2021, 21:29

@MrAmazing2

Ja klar aber dort kann er die Farbe ändern ..

Hohe34

12.08.2021, 14:12

Schreib doch einen eigenen component. Dann aknnst du alles bearbeiten wie du willst und es sieht meistens besser aus. LG

Woher ich das weiß:Hobby

Ähnliche Beiträge

Css input type checkbox :checked?

Ich habe nen Hamburger Menü, welches nachdem man es anklickt nen Kreuz wird. Startet man die Website neu bleibt das Kreuz allerdings. Gibt es nen Code der das mit dem checkbox checked zurücksetzt, damit es wieder zum Hamburger Menü wird? Bzw. Wenn die Website zum aller ersten Mal aufgerufen wird passt auch alles nur beim reload nicht. Vllt gibt es da ne Funktion das alles was gespeichert wurde, also wie weit man runter gescrollt hat, das chebox ding, usw, gelöscht wird.

Kurz zur Erklärung. Sobald man das Hamburger Menü anklickt egal in welche Zustand kommt so ne sidebar von links nach recht rein. Den Code dafür habe ich hier mal nicht angebracht weil mit der alles funktioniert.

Der Html Code ist etwa so aufgebaut:

<input type=checkbox>
<label onclick="toggle()"

Hier der Css code:

Hier der Javascript code:

Danke schon mal im voraus.

...zum Beitrag

CSS "checked" auf nur einen input (checkbox) anwenden?

Hallo,

Ich mache gerade für Info eine Webseite, allerdings dürfen wir noch kein JavaScript benutzen.

Deshalb habe ich , um die Webseite responsive zu machen das ganze mehr oder weniger mit einem input (checkbox) geregelt, die man nicht sieht, welche dann durch ein label verbunden ist, was wiederrum eine art Burger-Stapel ist. Auf diesen kann man clicken, und dann schieben sich die Links von oben nach unten.

Spielt aber hierfür keine Rolle.

Auf jeden Fall habe ich in CSS logischerweise dann das mit "checked ~" gemacht, was auch funktioniert.

Nun möchte ich aber einen Darkmode integrieren, und brauche dafür nochmal einen zweiten input (auch wieder checkbox), also im Prinzip das selbe Spiel nochmal.

Allerdings prüft "checked ~" ALLE checkboxen, sodass das responsive nicht mehr funktioniert, wenn der Darkmode aktiv wäre.

Kann ich also irgendwie nur immer die JEWEILIGE checkbox prüfen lassen?

Danke im Voraus! :)

...zum Beitrag

JavaScript: Farbe von Element ändern?

Hi Leute!

Ich will die Farbe eines Elementes(b) ändern, wenn das Element(a) über ein anderes bestimmtes Element hovert.

Heißt, das Element b ist fix am Bildschirm. Nun scrollt der User und das Element hovert das Element a. Nun soll etwas mit b passieren, wie gehe ich das mit JavaScript an?

Danke für eure Antworten!

...zum Beitrag

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zum Beitrag

Input required?

Wie kann ich mit Javascript ein Input required machen, denn bei Html kann man es ja ändern bei untersuchen

...zum Beitrag

html: wie button zentrieren und farbe ändern?

hallo, wie kann ich in html einen button, den ich wie folgt gemacht habe, zentrieren und die farbe ändern.

html:<a href="https://wakeuprecords.zohobookings.eu/#/wakeuprecords">
<button>Buche deine Session hier</button>
</a>
css:.button {
text-align: center;
}
button {
font-size: 20px;
background-color: yellow;
cursor: pointer;
color: green;
}

hab ich irgendwo einen fehler oder muss man das anders machen, den bei mir ändert sich gar nichts.

...zum Beitrag

CSS Klassen mit Javascript ändern?

Hallo!

Obwohl ich schon etwas Erfahrung mit CSS und Javascirpt habe, bin ich gerade das erste mal auf folgendes Problem gestoßen:

Ich habe für eine Website im Kopf in einem <style> - Bereich einige Klassen definiert.
(z.B.:
.header { border:1px outset gray; margin:.5em; padding:.5em; border-radius: 50%; height: 8%; width: 90%; }
und unten im body dann:
<div class="header">)
Den Stil dieser Klassen will ich durch Javascript dynamisch ändern.
Javascript soll also nicht den style von einzelnen HTML-Elementen ändern, und auch nicht HTML-Elementen neue Klassen zuweisen. Vielmehr soll der Stil der Klasse direkt geändert werden, so daß sich die Änderung auf alle Elemente dieser Klasse auswirkt.

Konkret möchte ich das Layout dynamisch an die Größe des Browserfensters anpassen. Ein onResize Eventhandler im Body löst eine Javascript-Funktion aus, die entsprechende Änderungen im Layout vornimmt. Dabei wäre es natürlich praktisch, wenn man ähnlich aussehende Elemente (= gleiche class = gleicher CSS-style) auch zusammen anpassen könnte, und zwar auch mit errechneten Werten (z.B. Math.floor(clientHeight / 2)).

Habe lange gegoogelt und auf den üblichen Plattformen gesucht, habe aber immer nur Anleitungen gefunden, wie man Elementen neue Klassen zuweist.

Im Moment löse ich das Problem mit einer for-Schleife:
const AllHeaders = document.getElementsByClassName("header");
for (let i = 0; i < AllHeaders.length; i++) {
var Radius = Math.floor(AllHeaders[i].clientHeight / 2)
AllHeaders[i].style.borderRadius = Radius.toString() + "px";
}
und so weiter, für alle Klassen einzeln.
Das kann irgendwie doch nicht die beste Lösung sein...
Es muß doch eine Möglichkeit geben, auf die Klassen-Definitionen im Stylesheet mit Javascript zuizugreifen. Ansonsten wäre die Funktionalität von CSS doch stark eingeschränkt.

Hoffe, jemand kennt sich aus...

...zum Beitrag

JavaScript toggle color onclick?

Hallo.

Ich möchte in einem HTML Dokument mit JS die Farbe einer Schrift durch Klicken ändern. Default soll es beispielsweise schwarz sein, wenn man auf den Text klickt soll es grün werden. Bei einem zweiten Klick soll die Schrift wieder schwarz werden.

Ich habe viel ausprobiert, komme aber nicht zum Ziel.

Vielleicht könnt Ihr mir helfen? Vielen Dank im Vorraus!

...zum Beitrag

Wie Eingabefeld "input type date" per CSS anpassen?

Hallo zusammen,

ich erstelle gerade mit Vue.js eine Website, die ein Formular mit verschiedenen Eingabefeldern enthält.

Nun frage ich mich, wie ich ein "input type date" per CSS anpassen kann.

Konkret geht es mir zum einen darum, die Farbe, mit der einzugebende Tag / Monat / Jahr hinterlegt ist, zu ändern (siehe nachfolgendes Bild).

Zum anderen möchte ich, wenn man den Kalender geöffnet hat, dass das "Mai 2024" nicht umrandet und grau hinterlegt ist, das aktuelle Datum nicht blau umrandet ist, die Schriftfarbe für Samstage und Sonntage ändern sowie kein Feld "Leeren" haben (siehe nachfolgendes Bild).

Gibt es eine Möglichkeit, die Felder wie beschrieben individuell per CSS anzupassen? Und wenn ja, wie mache ich das?

Die Umrandung des Eingabefelds für das Datum (TT.MM.JJJJ), die in den Bildern noch blau ist, habe ich inzwischen ändern können:

input[type=date]:hover, input[type=date]:focus {
outline: 2px solid #111111;
}

Vielen Dank im Voraus für eure Hilfe!

...zum Beitrag

Javascript mit onclick-Attribut ändern?

Hallo,

wie kann ich mit JavaScript ein Attribut ändern, wenn ich auf das entsprechende Objekt klicke?

Bis jetzt habe ich folgenden Code:

<img src="bild.png" onclick="elem.setAttribute("src","anderesbild.png");">

...zum Beitrag

CSS transition mit JavaScript onclick ausfuehren?

Ich wuerde gerne in einer NavBar (oben fixiert), links einen Button erstellen, der mit onclick eine CSS ausfuehrt, die eine SideBar (von links) drauflegt.

Also, sobald links oben das Onclick geklickt wird -> Sidebar wird von links aus reingeschoben, indem eine CSS ausgefuehrt wird.

Das einzige was Ich nicht wuesste ist wie Ich das JS onclick dazu bringe, entweder eine CSS auszufuehren, oder gar zu erstellen/auszuwechseln (zu replacen). Bzw. alternativ, was mir noch in den Sinn kaeme, koennte das CSS in default ja in einem Kommentar stehen, und bei Ausfuehrung wird zwischen zwei CSS gewechselt (das eine wird in Kommentar gesetzt (default) und das andere, was normal in Kommentar steht, steht nun ohne Kommentar, und bei wegklicken wird das wieder zurueckgesetzt) - aber wie wuerde das gehen, Ich habe naemlich keinerlei Idee dazu..

...zum Beitrag

Wie kann man den Dark-Mode Seitenübergreifend machen?

Liebe GuteFrage.net Community,

Wie kann ich dafür sorgen, dass der Dark-Mode aktiviert bleibt, wenn man auf eine Unterseite geht von der Seite? Habe ein wenig JavaScript genutzt, doch ich kenne mich noch nicht so wirklich aus in dem Bereich. Ich hoffe, Ihr könnt es mir erklären. :) Dies ist mein Code:

HTML /Javascript:

<button onclick="myFunction()">Toggle dark mode</button>
            <script>
              function myFunction() {
              var element = document.body;
              element.classList.toggle("dark-mode");
           }
            </script>

Css:

.dark-mode {
  background-image: radial-gradient(#5c5252 2%, transparent 7%),
    radial-gradient(#928f8f 2%, transparent 7%);
  background-color: #16140f;
  background-position: 25px 35px, 50px 50px;
  background-size: 20px 20px; 
}

Eine weitere Frage wäre da noch... Und zwar wie bekomme ich es hin in Boxen die Farbe zu verändern? Bisher verändert sich nur der Hintergrund...

...zum Beitrag

CSS-onclick?

Hallo, ist es möglich, dass ich die Farbe von einem Button ändern kann, wenn ich draufklicke? Gibt es da so etwas wie "onclick", wie bei JavaScript?

...zum Beitrag

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen