如何自定义复选框

Question

如何将复选框编辑为如下所示： checkboxes 我在Bootstrap上找不到任何东西。

当前，我的复选框列表如下所示： Unmodified checkboxes

在我的cshtml中，我有一个用javascript填充的空div。

<div id="check-list-box" class="list-group checked-list-box">

</div>

Javascript：

for (i = 0; i < brUredjaja; i++) {
  var brParametara = data[i].series.length;

  if ((brParametara > 1) || (brUredjaja > 1)) {
    for (j = 0; j < brParametara; j++) {
      {
        $("#graphId").append("<div class='graphReport col-md-6' id = div" + i + "dev" + j + "></div>");
        $('#check-list-box').append('<input type="checkbox" checked id="myCheckbox" />' + data[i].series[j].name);
        InitGraph(data[i].dates, data[i].series[j].data, "div" + i + "dev" + j, data[i].series[j].name, data[i].deviceName);
      }
    }
  }
}

Answer 1

将类名添加到复选框，然后编辑其CSS。 This link将带您进入一些示例，您可以从中获得“操作方法”。

Answer 2

请将此代码用于自定义复选框-

.custom-checkbox{
		padding-left: 30px;
		position: relative;
		display: inline-block;
		vertical-align: middle;
		font-weight: 500;
		font-family: arial;
		padding-top: 3px;
		margin-bottom: 15px;
	}
	.custom-checkbox input[type="checkbox"]+span:before {
	    content: "";
	    width: 20px;
	    height: 20px;
	    border: 2px solid #383a43;
	    position: absolute;
	    left: 0;
	    top: 0;
	}
	.custom-checkbox input[type="checkbox"]+span:after {
	    content: "";
	    width: 10px;
	    height: 5px;
	    border-left: 2px solid;
	    border-bottom: 2px solid;
	    position: absolute;
	    left: 5px;
	    top: 6px;
	    transform: rotate(-39deg);
	    visibility: hidden;
	    opacity: 0;
	    transition: all 0.4s ease;
	}
	.custom-checkbox input[type="checkbox"]{display: none;}
	.custom-checkbox input[type="checkbox"]:checked+span:after{
  		visibility: visible;
  		opacity: 1;
	}

<label class="custom-checkbox">
	<input type="checkbox" />
	<span>Checkbox 1</span>
</label>
<br>
<label class="custom-checkbox">
	<input type="checkbox" />
	<span>Checkbox 2</span>
</label>
<br>
<label class="custom-checkbox">
	<input type="checkbox" />
	<span>Checkbox 3</span>
</label>
<br>
<label class="custom-checkbox">
	<input type="checkbox" />
	<span>Checkbox 4</span>
</label>