Как настроить флажки

Question

Как изменить флажки, чтобы они выглядели так: флажки Я ничего не нашел в Bootstrap.

В настоящее время мой список флажков выглядит следующим образом: Неизмененные флажки

В моем cshtml у меня есть пустой div, который я заполняю из javascript.

<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

Пожалуйста, используйте этот код для пользовательского флажка -

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

Answer 2

Добавьте имя класса к флажкам и отредактируйте его CSS. Эта ссылка приведет вас к некоторым примерам, из которых вы можете получить "как".