javascript - 设置复选框样式

我正在创建一个待办事项列表，允许用户添加和检查任务。我想知道是否有一种方法可以为用户添加的每个任务设置实际的复选框样式。

编辑：所以我已经编辑了CSS代码，但是我仍然不确定自己在做什么错。

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        var li = $("<li><input type='checkbox' id='newtasklist' class='right-margin' <label>" + newTask + "</label></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });

  $('body').on('click', ':checkbox', function(e) {
    $(this).parent().toggleClass('selected');
  });
});

.selected {
  text-decoration: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox" id="newtaskitem" class="right-margin"><label>Welcome to Droplet's 'Tasks' feature!</label></li>
</ul>

我尝试过的CSS代码：

.selected {
  text-decoration: line-through;
  font-size: 20px;
}
.right-margin{
  margin-right: 30px;
}

input[id="newtasklist"] {
  background: url('checked.png');
  background-size: 100%;
}

最佳答案

background-size指定背景图片的大小，而您可以尝试使用font-size

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        var li = $("<li><input type='checkbox' id='newtasklist' class='right-margin' <label>" + newTask + "</label></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });

  $('body').on('click', ':checkbox', function(e) {
    $(this).parent().toggleClass('selected');
  });
});

.selected {
  text-decoration: line-through;
  background: url('https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  font-size: 20px;
}
.right-margin{
  margin-right: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox" id="newtaskitem" class="right-margin"><label>Welcome to Test 'Tasks' feature!</label></li>
</ul>

关于javascript - 设置复选框样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56945274/