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 Fragen

Checkboxen die Pflicht sein soll?

man soll umbedigt eines der Checkboxen auswählen, Bei Bedarf oder Regelmäßig oder Nein.

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Bei_Bedarf)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Bei_Bedarf" value="Ja">{/if} {language key="elf_Frage_11_Bei_Bedarf"}{if !$pdf}</label>{/if}</div>       

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Regelmaessig)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Regelmaessig" value="Ja">{/if} {language key="elf_Frage_11_Regelmaeßig"}{if !$pdf}</label>{/if}</div>

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Nein)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Nein" value="Ja">{/if} {language key="elf_Frage_11_Nein"}{if !$pdf}</label>{/if}</div>

...zur Frage

Wie kann ich bei einer richtiger Antwort einen Text anzeigen lassen und bei einer falscher Antwort einen anderen?

Ich möchte auf meiner Webseite ein kleines Multiple-choice-Quiz machen.

Hier möchte ich, dass, wenn man das Richtige auswählt und auf Lösung klickt, eine Nachricht erscheint, dass dies die richtige Lösung ist. Bei einer falschen dann halt, dass es die falsche Antwort ist.

Ich könnte hier nach action="/Tests/Posts" eine andere Webseite öffnen lassen. Aber dann würde sich ja bei der falschen Antwort und bei der richtigen Antwort das gleiche Fenster öffnen.

<form method="post" action="/Tests/Post">
  <fieldset>
    <legend>Bei Längswellen erfolgt die Schwingung ... Ausbreitungsrichtung.</legend>
    <input type="checkbox" name="schwingung" value="in" onclick="return ValidatePetSelection();">... in ...<br>
    <input type="checkbox" name="schwingung" value="querZur" onclick="return ValidatePetSelection();">... quer zur ...<br>
    <input type="checkbox" name="schwingung" value="Birds" onclick="return ValidatePetSelection();">... gegen ...<br>
    <br>
    <input type="submit" value="Lösung">
  </fieldset>
</form>
<script type="text/javascript">
  function ValidatePetSelection() {
    var checkboxes = document.getElementsByName("schwingung");
    var numberOfCheckedItems = 0;

    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked)
        numberOfCheckedItems++;
    }

    if (numberOfCheckedItems > 1) {
      alert("Es ist genau eine Antwort richtig.");
      return false;
    }
  }
</script>

...zur Frage

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zur Frage

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!

...zur Frage

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! :)

...zur Frage

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

...zur Frage

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?

...zur Frage

Bild aus einem Input mit Javascript anzeigen?

Ich würde gerne, dass man eine Datei hochlädt und mit einem Button dann auf der Seite anzeigen lassen kann. Ich habe schon etwas rum probiert und es kommt immer nur " [object HTMLImageElement] " raus.

Mein Code ist dieser:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        function anzeigen() {

            let bild = new Image();
            bild.src = document.getElementById("input");

            document.getElementById("bild").innerHTML = bild;

        }


    </script>
</head>
<body>
    <input type="file" accept="image/png, image/jpg" id="input">
    <input type="button" onclick="anzeigen();">
    <div id="bild">



    </div>
</body>
</html>

Das hochladen von Dateien funktioniert perfekt. Nur wird das Bild nicht angezeigt.

(Bin Anfänger)

Danke für eure Hilfe^^

...zur Frage

Taschenrechnr mit Typescript erstellen?

Hallo, wir sollten für unseren Kurs einen Taschenrechner auf unserer Webseite erstellen. Diese sollte erst + - * und / errechnen können. Dies habe ich so gemacht:

<form name="Rechner">
 <table border="10" cellpadding="10" bgcolor="#E0E0E0">
   <tr>
     <td bgcolor="#C0C0C0"><input name="Display" size="30" maxlength="30"></td>
   </tr>
   <tr>
     <td>
  <table>
       <tr>
         <td width="50"><input type="button" value="  7  " onclick="Hinzufuegen('7')"></td>
         <td width="50"><input type="button" value="  8  " onclick="Hinzufuegen('8')"></td>
         <td width="70"><input type="button" value="  9  " onclick="Hinzufuegen('9')"></td>
         <td width="50"><input type="button" value="  +   " onclick="Hinzufuegen('+')"></td>
       </tr>
       <tr>
         <td width="50"><input type="button" value="  4  " onclick="Hinzufuegen('4')"></td>
         <td width="50"><input type="button" value="  5  " onclick="Hinzufuegen('5')"></td>
         <td width="70"><input type="button" value="  6  " onclick="Hinzufuegen('6')"></td>
         <td width="50"><input type="button" value="   -   " onclick="Hinzufuegen('-')"></td>
       </tr>
       <tr>
         <td width="50"><input type="button" value="  1  " onclick="Hinzufuegen('1')"></td>
         <td width="50"><input type="button" value="  2  " onclick="Hinzufuegen('2')"></td>
         <td width="70"><input type="button" value="  3  " onclick="Hinzufuegen('3')"></td>
         <td width="50"><input type="button" value="      " onclick="Hinzufuegen('')"></td>
       </tr>
       <tr>
         <td width="50"><input type="button" value="   =   " onclick="Ergebnis()"></td>
         <td width="50"><input type="button" value="  0  " onclick="Hinzufuegen('0')"></td>
         <td width="70"><input type="button" value="  .   " onclick="Hinzufuegen('.')"></td>
         <td width="50"><input type="button" value="   /   " onclick="Hinzufuegen('/')"></td>
       </tr>
       <tr>
         <td width="50"><input type="button" value="Wurzel " onclick="Sonderfunktion('sqrt')"></td>
         <td width="50"><input type="button" value=" pow " onclick="Sonderfunktion('pow')"></td>
         <td width="70"><input type="button" value=" log " onclick="Sonderfunktion('log')"></td>
         <td width="50"><input type="reset" value="  C  "></td>
       </tr>
       <tr>
     </table>
     </td>
   </tr>
 </table>
</form>

Jetzt sollen wir den Taschenrechner erweitern und Flächeninhalt; Umfang(Rechteck),Potenzieren,Fakultät, Modulo und Dezimal Dual hinzufügen.

Die Buttons kann ich erstellen, aber wie erstelle ich die dazugehörige scripts? Ich hoffe jemand kann mir helfen. :(

...zur Frage

JavaScript Funktion Summe?

Hallo ich möchte ein einfaches Programm scheiben was von zwei input feldern die Zahlen nach button Bestätigung zusammenrechnet. Bin mir bei meinem Code nicht sicher. Es addiert die Zahlen nicht sondern schreibt sie zusammen. 1+2=12

<script>
function summe()
{
var z1=document.getElementById('zahl1').value;
var z2=document.getElementById('zahl2').value;


var ergebnis= (z1+z2);
document.write("Das Ergebnis ist:"+ ergebnis);
}
</script>
<input type=text id="zahl1">
<input type=text id="zahl2">
<input type=button onclick="summe()" value="=">
</body>

...zur Frage

HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

...zur Frage

JavaScript quiz?

Ich habe mithilfe von verschiedenen online Foren ein Quiz in Java Script geschrieben. Jedoch bekomm ich wenn ich auf die Antwort klicke keine Rückmeldung ob die Antwort richtig ist. Könnte mir jemand sagen was der Fehler ist?

Quellcode:

<script type="text/javascript">
function antworten()
{
  var answer;
  for(var i = 0; i < document.forms[0].antowort.length; ++i) {
    if(document.forms[0].antwort[i].checked) {
     answer = document.forms[0].antwort[i].value;
     break;
    }
  }
  if(answer == 2) {
    alert('Richtig!');
  } else {
    alert('falsch');
  }
}
</script>
<div align="center">
  <input type='radio' name='antwort' value='1'>2am<br>
  <input type='radio' name='antwort' value='2'>Down for you<br>
  <input type='radio' name='antwort' value='3'>Body Bag<br>
  <input type='radio' name='antwort' value='4'><br><br>
  <input type='button' value='Okay' onClick='antworten()'>
</div>

...zur Frage

Visibility-Funktion geht nicht. Was ist falsch?

Auf meiner Website programmiere ich ein Loginsystem, bei dem ich eine "Visibility-Funktion" (show/hide password) implementiert habe.

Immer wenn ich auf das Icon klicke, soll es die Eigenschaft: "display: none" annehmen, das andere Icon einblenden und den input-Tag auf: type="password" setzen, damit man das Eingegebene sieht.

Der Wechsel zwischen den zwei Icons funktioniert prima. Leider ändert sich der Input type nicht. Ich habe irgendeinen Fehler im Sourcecode, nur finde ich diesen nicht.

HTML:

<div class="login_element password">
  <i class="fa fa-lock password_lock" aria-hidden="true"></i>
  <input type="password" placeholder="password*" class="inputpassword" />
  <i class="fa fa-eye" id="show" aria-hidden="true" onclick="pwdvison()"></i>
  <i class="fa fa-eye-slash" id="hide" aria-hidden="true" onclick="pwdvison()"></i>
</div>

JS:

<script type="text/javascript">
  function pwdvison() {
    var x = document.getElementsByClassName("inputpassword");
    
    if (x.type === "password") {
      x.type = "text";
      document.getElementById('hide').style.display = "inline-block";
      document.getElementById('show').style.display = "none";
    }
    else {
      x.type = "password";
      document.getElementById('hide').style.display = "none";
      document.getElementById('show').style.display = "inline-block";
    }
  }
</script>

...zur Frage

Javascript Formular mit Placeholder rechnen?

Hallo,

ich habe folgenden Code:

<html>
    <head></head>
    <body>
        <input type="number" id="in1" placeholder="0">
        <input type="number" id="in2" placeholder="0">
        <input type="number" id="out">
        <input type="button" value="Weiter" onclick="
            out.value = parseFloat(in1.value) + parseFloat(in2.value);
        ">
    </body>
</html>

Wenn ich in ein Feld nichts eingebe, doll Javascript den placeholder (also 0) als Inhalt ansehen und mit diesem Wert weiterrechnen. Es klappt aber leider noch nicht. Kann mir da wer helfen?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen