checkbox background color code example

Example 1: color checkbox css when clicked

input[type=checkbox]:checked {
  /*CSS after CHECKED*/
  color: #ffd369;
}

Example 2: change the body background color with javascript checkbox using

blue=document.getElementsByClassName("check1")[0]
red=document.getElementsByClassName("check2")[0]
yellow = document.getElementsByClassName("check3")[0]
function colors(color) {
    document.body.style.backgroundColor = color;
}
 blue.addEventListener("click", e => {
     if (blue.checked) {
         colors("blue")
     }
     else if (red.checked) {
         colors("red")
     }
     else if (yellow.checked) {
         colors("yellow")
         }
     else {
    colors("white")         
     }
 })

red.addEventListener("click", e => {
    if (red.checked) {
       colors("red")
    }
    else if (blue.checked) {
        colors("blue")
    }
    else if (yellow.checked) {
        colors("yellow")
    }
    else {
     colors("white")
    }
})
yellow.addEventListener("click", e => {
    if (yellow.checked) {
     colors("yellow")
    }
    else if (red.checked) {
        colors("red")
    }
    else if(blue.checked){
      colors("blue")
    }
    else {
       colors("white")
    }
})

Tags:

Css Example