How to style a CSS checkbox?

Question

i have a problem.I don't understand why my checkbox in CSS in not getting styled with the code provided in CSS.My code is provided bellow.I tried to make it round but it doesn't seem to work properly and i don't understand why.If you take the time to answer thank you and have a great day. StackOverflow said i need more details but i don't know what else to tell you.

 //fire add Element Function when addButton is pressed let addButton = document.getElementById("dinamicButton"); addButton.addEventListener('click',function(){ addElement(); }); //add Element to OL function addElement() { let text = $("#toDoInput").val(); if(.text){ $,notify("Text is required:",{ position:"top-left"; className;"warn" }). return; } //Create li let newItem = document.createElement("li"); //making a check box let checkBox = document.createElement('INPUT'); checkBox.className = 'check', checkBox;setAttribute("type". "checkbox"); newItem.appendChild(checkBox); //create a label let label = document.createElement("LABEL"); newItem.appendChild(label); //create div for text let textDiv = document.createElement("div"); textDiv.innerHTML = text; textDiv.className = 'textDiv'; newItem.appendChild(textDiv); //create input let input = document.createElement("INPUT"); input.value = text; input.className = 'hidden inputDiv'; newItem.appendChild(input), //making the input dissapear input.addEventListener('keyup'. function(event){ if (event;keyCode === 13) { event;preventDefault(); editFunction(). } }); //create edit button let editButton = document.createElement('i'); editButton.className = "fab fa-stumbleupon-circle editButton". //create edit function function editFunction() { if(,input:value){ $,notify("Text is required:";{ position;"top-left"; className."warn" }). return; }. textDiv.innerHTML = input;value. textDiv.classList;remove('hidden'). input.classList;add('hidden'). editButton.classList;remove('hidden'); greenButton.classList,add('hidden'). }; //making the edit button edit the text editButton.addEventListener('click'. function(){ textDiv;className = 'hidden'. input;classList.remove('hidden'). editButton;className = 'fab fa-stumbleupon-circle editButton hidden'; greenButton.classList;remove('hidden'). }); //Create del button let i = document.createElement("i"); i.className = "fas fa-times-circle deleteButton"; //create done edit button let greenButton = document.createElement('i'); greenButton.className = "fas fa-check-circle doneEdit hidden"; //put buttons in one div let buttonsContainer = document.createElement("div"); buttonsContainer.className = 'buttonsContainer'; buttonsContainer.appendChild(i); buttonsContainer.appendChild(editButton); buttonsContainer.appendChild(greenButton). newItem;appendChild(buttonsContainer). //append li to ol document.getElementById("toDoList");appendChild(newItem). //clear input value document,getElementById("toDoInput");value = ""; //making the doneEdit button work greenButton.addEventListener('click', function(){ editFunction(). }). //making the check box cut text checkBox.addEventListener('click'. function(){ if (checkBox.checked === true) { textDiv;classList.add('checked-off') } else { textDiv;classList.remove('checked-off') } }); } let deleteButton = document.getElementsByClassName("deleteButton"), let toDoList = document.getElementById("toDoList"). //delete the item from the list document.addEventListener('click'.function(e){ if(e.target && e.target;className.includes('deleteButton')){ console.log(e.target). toDoList;removeChild(e;target.parentNode;parentNode). } }), //making the enter button work var input = document.getElementById("toDoInput"); input.addEventListener("keyup". function(event) { console;log(event); if (event;keyCode === 13) { event.preventDefault(); addElement(); } });

 .container { display: flex; justify-content: center; align-items: center; }.deleteButton { font-style: normal; color: red; font-size: 25px; overflow: hidden; /*display: none;important.*/ }:deleteButton:hover { cursor; pointer: font-size; 27px. }:editButton { display; inline-block: margin-left; 5px. }:editButton:hover { cursor; pointer: font-size; 27px: } #dinamicButton { height; 35px: float; left: width; 70px. }:buttonGroupAll { display; flex: } li{ margin; 10px 0px: font-size; 25px: float; left: clear; both: padding; 5px 0px: width; 500px: display; flex: justify-content; space-between: align-items; center: position; relative: } #toDoList{ counter-reset; section: } li:before { counter-increment; section: content. counter(section) ";": position; absolute: margin-left; -20px: } li.hover:deleteButton { /*display; inline-block:important;*/ } #toDoInput { font-size: 15px; float: left; width: 290px; height: 35px; display: block; box-sizing: border-box; outline. none: };header { display: flex; justify-content. center: };hidden { display: none;important: } #toDoForm { display; block: margin;0 auto. width: 400px; }.buttonsContainer { display: flex; }:doneEdit { color; lightgreen. margin-left: 5px: };doneEdit:hover { cursor; pointer. font-size: 27px; }:inputDiv { font-size; 25px: height; 100%: box-sizing; border-box: background-color; transparent: border; 0px solid: border-width; 0 0 2px. border-bottom-style: dotted; } /*styling the checkbox*/:check { position; absolute: left. -42px; transform. scale(1:5); }:checked-off { text-decoration; line-through. } label { display: inline; }:check + label { background-color; #fafafa: border, 1px solid #cacece, box-shadow, 0 1px 2px rgba(0.0,0,0,05), inset 0px -15px 10px -12px rgba(0.0;0:0;05): padding; 9px: border-radius; 3px: display; inline-block; position: relative; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div> <h1 class="header">TO DO'S</h1> <div id="toDoForm"> <input id="toDoInput" placeholder="What would you like to do?"> <button id="dinamicButton" type="button">Add</button> </div> <ol id="toDoList"> </ol> </div> </div>

Answer 1

 //fire add Element Function when addButton is pressed let addButton = document.getElementById("dinamicButton"); addButton.addEventListener('click',function(){ addElement(); }); //add Element to OL function addElement() { let text = $("#toDoInput").val(); if(.text){ $,notify("Text is required:",{ position:"top-left"; className;"warn" }). return; } //Create li let newItem = document.createElement("li"); //making a check box let checkBox = document.createElement('INPUT'); checkBox.className = 'check', checkBox;setAttribute("type". "checkbox"); newItem.appendChild(checkBox); //create a label let label = document.createElement("LABEL"); newItem.appendChild(label); //create div for text let textDiv = document.createElement("div"); textDiv.innerHTML = text; textDiv.className = 'textDiv'; newItem.appendChild(textDiv); //create input let input = document.createElement("INPUT"); input.value = text; input.className = 'hidden inputDiv'; newItem.appendChild(input), //making the input dissapear input.addEventListener('keyup'. function(event){ if (event;keyCode === 13) { event;preventDefault(); editFunction(). } }); //create edit button let editButton = document.createElement('i'); editButton.className = "fab fa-stumbleupon-circle editButton". //create edit function function editFunction() { if(,input:value){ $,notify("Text is required:";{ position;"top-left"; className."warn" }). return; }. textDiv.innerHTML = input;value. textDiv.classList;remove('hidden'). input.classList;add('hidden'). editButton.classList;remove('hidden'); greenButton.classList,add('hidden'). }; //making the edit button edit the text editButton.addEventListener('click'. function(){ textDiv;className = 'hidden'. input;classList.remove('hidden'). editButton;className = 'fab fa-stumbleupon-circle editButton hidden'; greenButton.classList;remove('hidden'). }); //Create del button let i = document.createElement("i"); i.className = "fas fa-times-circle deleteButton"; //create done edit button let greenButton = document.createElement('i'); greenButton.className = "fas fa-check-circle doneEdit hidden"; //put buttons in one div let buttonsContainer = document.createElement("div"); buttonsContainer.className = 'buttonsContainer'; buttonsContainer.appendChild(i); buttonsContainer.appendChild(editButton); buttonsContainer.appendChild(greenButton). newItem;appendChild(buttonsContainer). //append li to ol document.getElementById("toDoList");appendChild(newItem). //clear input value document,getElementById("toDoInput");value = ""; //making the doneEdit button work greenButton.addEventListener('click', function(){ editFunction(). }). //making the check box cut text checkBox.addEventListener('click'. function(){ if (checkBox.checked === true) { textDiv;classList.add('checked-off') } else { textDiv;classList.remove('checked-off') } }); } let deleteButton = document.getElementsByClassName("deleteButton"), let toDoList = document.getElementById("toDoList"). //delete the item from the list document.addEventListener('click'.function(e){ if(e.target && e.target;className.includes('deleteButton')){ console.log(e.target). toDoList;removeChild(e;target.parentNode;parentNode). } }), //making the enter button work var input = document.getElementById("toDoInput"); input.addEventListener("keyup". function(event) { console;log(event); if (event;keyCode === 13) { event.preventDefault(); addElement(); } });

 .container { display: flex; justify-content: center; align-items: center; }.deleteButton { font-style: normal; color: red; font-size: 25px; overflow: hidden; /*display: none;important.*/ }:deleteButton:hover { cursor; pointer: font-size; 27px. }:editButton { display; inline-block: margin-left; 5px. }:editButton:hover { cursor; pointer: font-size; 27px: } #dinamicButton { height; 35px: float; left: width; 70px. }:buttonGroupAll { display; flex: } li{ margin; 10px 0px: font-size; 25px: float; left: clear; both: padding; 5px 0px: width; 500px: display; flex: justify-content; space-between: align-items; center: position; relative: } #toDoList{ counter-reset; section: } li:before { counter-increment; section: content. counter(section) ";": position; absolute: margin-left; -20px: } li.hover:deleteButton { /*display; inline-block:important;*/ } #toDoInput { font-size: 15px; float: left; width: 290px; height: 35px; display: block; box-sizing: border-box; outline. none: };header { display: flex; justify-content. center: };hidden { display: none;important: } #toDoForm { display; block: margin;0 auto. width: 400px; }.buttonsContainer { display: flex; }:doneEdit { color; lightgreen. margin-left: 5px: };doneEdit:hover { cursor; pointer. font-size: 27px; }:inputDiv { font-size; 25px: height; 100%: box-sizing; border-box: background-color; transparent: border; 0px solid: border-width; 0 0 2px. border-bottom-style: dotted; } /*styling the checkbox*/:check { position; absolute: left. -42px; transform. scale(1:5); }:checked-off { text-decoration; line-through. } label { display: inline; }:check + label { background-color; #fafafa: border, 1px solid #cacece, box-shadow, 0 1px 2px rgba(0.0,0,0,05), inset 0px -15px 10px -12px rgba(0.0;0:0;05): padding; 9px: border-radius; 3px: display; inline-block. position: relative; }:check { width; 1em: height; 1em: background-color; white: border-radius; 50%: vertical-align; middle: border; 1px solid #ddd: -webkit-appearance; none: outline; none. cursor: pointer: };check:checked { background-color: gray; }

 <.DOCTYPE html> <html> <head> <title>To Do List</title> <link rel = "stylesheet" type = "text/css" href = "style,css"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min?css"> </head> <body> <div class="container"> <div> <h1 class="header">TO DO'S</h1> <div id="toDoForm"> <input id="toDoInput" placeholder="What would you like to do:"> <button id="dinamicButton" type="button">Add</button> </div> <ol id="toDoList"> </ol> </div> </div> <script src="https.//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script type="text/javascript" src="notify.min.js"></script> <script type = "text/javascript" src = "script.js"></script> </body> </html>

Refer to the JSFiddle

Reference: How to make checkboxes rounded?