Совместите флажок с меткой и добавьте цвет фона для отмеченных флажков

Question

У нас есть следующая структура HTML.Элемент wrapper имеет max-width, потому что мы не хотим, чтобы он был длиннее, поэтому мы должны иметь решение с этим атрибутом.

Мы хотим иметь возможность скрыть флажок по умолчанию, чтобы мы могли стилизовать флажки, подобные Пользовательские флажки Pure CSS , но у нас есть свои собственные стили, которые мы хотим использовать в структуре HTML.,

Вопросы

Как мы можем стилизовать флажки для непроверенных и проверенных таким образом, чтобы они совпадали, а отмеченные помечались background-color: green?

Токовый выход:

Желаемый выход:

Вот что у нас есть, но не повезло.Флажок даже не отображается.

ul {
 list-style: none;
 display: block;
}

ul li {
  display: block;
}

input[type="checkbox"] {

}

input[type="checkbox"]:checked {

}

.wrapper {
  // This needs to remain. 
  max-width: 160px;
}

<div class="wrapper">
<ul>
  <li>
     <input type="checkbox">
     <label>
       <span>Clear All</span>
     </label>
  </li>
  <li>
     <input type="checkbox">
     <label>
       <span>Cloud and Data monitoring</span>
     </label>
  </li>
  
</ul>
</div>

Answer 1

Есть еще способы.Например.

input[type='checkbox'] {float: left;}
input[type='checkbox'] + label {display: block; margin-left: 30px;}

В действительности вы используете любые пользовательские флажки, в CSS это будет пользовательский элемент вместо input[type='checkbox'], конечно.

https://jsfiddle.net/1haub3kx/1/

Answer 2

Существует множество учебных пособий и подходов для создания пользовательских флажков с помощью CSS.

Код, который вы указали, не содержит каких-либо настроек флажка, как упоминалось в Utkanos.

Попробуйте последовать примеру Как создать пользовательский флажок от w3schools