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

问题描述 投票：0回答：1

我有一个问题。我不明白为什么我的CSS复选框没有使用CSS提供的代码进行样式设置。我的代码在下面提供。我试图使其完整，但似乎无法正常工作，并且我不明白为什么。如果您花时间回答谢谢，并度过愉快的一天！StackOverflow说我需要更多详细信息，但我不知道还有什么要告诉你。

HTML

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

CSS

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

Java脚本

//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();
  }
});
javascript html input checkbox label
1个回答
0
投票

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

参考：How to make checkboxes rounded?

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.