Checkbox radius change if checked

Question

This is my css

.round {
  position: relative;
}

.round input {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
}

I made the border radius change in css but couldn't figure it how to make it in js. Can someone please help me :) I am new to javascript so please don't judge me but i tried with

var checkbox=document.getElementById('checkbox');
if (checkbox.checked){checkbox.style.borderRadius="10%";
}

HTML

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href="index.css"> </head> <body>     <div class="container">         <div class="round">           <input type="checkbox" id="checkbox"/>          </div>       </div>       <script src="index.js"></script> </body> </html>

Answer 1

I think that the right place to do that is css:

.round input[type="checkbox"]:checked + label:after {
  border-radius: 10%
}

There are few issues with your JS approach, first, you need to add an event listener to detect the change:

checkbox.addEventListener('change', (e) => {
  if (e.target.checked) {
    // add a class or specific styles here
  } else {
    // remove prev updates
  }
});

2nd, you are trying to add the borderRadius to the checkbox, and you cannot really style a checkbox. Clearly, in your case, the label:after is responsible for the checkbox styling. Again, a CSS solution would be much cleaner

Checkbox radius change if checked

Question

1 answers

solution1
0 2020-09-02 15:07:37

Checkbox radius change if checked

Question

1 answers

solution1 0 2020-09-02 15:07:37

solution1
0 2020-09-02 15:07:37