如何设置 CSS 复选框的样式？

Question

我有一个问题。我不明白为什么我在 CSS 中的复选框没有使用 CSS 中提供的代码进行样式设置。我的代码在下面提供。我试图使它变圆，但它似乎不能正常工作，我不'不明白为什么。如果你花时间回答谢谢你，祝你有美好的一天。 StackOverflow 说我需要更多细节，但我不知道还能告诉你什么。

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

参考JSFiddle

参考： 如何使复选框四舍五入？