Как настроить галочку на checbox с помощью css?

Question

У меня есть флажок, который я хотел бы выглядеть следующим образом

Это то, что я пробовал до сих пор:

.rodo_icon-right {
  position: relative;
  top: 4px;
  font-size: 20px !important;
}

.rodo-checkbox {
  display: block;
  /*margin-top: -46px;    - commented for snippet to work */
  position: absolute;
  font-size: 10px;
}

.rodo-checkbox input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.rodo-checkbox label {
  position: relative;
  cursor: pointer;
  text-transform: initial;
}

.rodo-checkbox label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 6px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 3px;
}

.rodo-checkbox input:checked+label:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 11px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

<div class="rodo-checkbox">
  <input type="checkbox" id="html">
  <label for="html">I agree to the terms of service - <span style="text-decoration: underline;">read the Terms of Service</label><i class="fa fa-angle-right rodo_icon-right" aria-hidden="true"></i>
</div>

Я пробовал разные методы, но не могу получить то, что хочу.

Что мне нужно изменить, чтобы получить то, что яхочу?Пожалуйста, помогите.

Answer 1

Вероятно, проще всего использовать изображения, которые представляют собой пустой и отмеченный флажок.Затем с помощью псевдокода вы можете поместить эти изображения перед меткой.

#html {
  display: none;
}

#html+label {
  position: relative;
  margin-left: 25px;
  display: flex;
  align-items: center;
  line-height: 25px;
}

#html:not(:checked)+label::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 0;
  width: 25px;
  height: 25px;
  /* Use an empty checkbox image */
  background-image: url("https://via.placeholder.com/25x25/00ff00");
}
#html:checked+label::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 0;
  width: 25px;
  height: 25px;  
  /* Use an checked checkbox image */
  background-image: url("https://via.placeholder.com/25x25/ff0000");
}

<div class="rodo-checkbox">
  <input type="checkbox" id="html">
  <label for="html">I agree to the terms of service - <span style="text-decoration: underline;">read the Terms of Service</span></label><i class="fa fa-angle-right rodo_icon-right" aria-hidden="true"></i>
</div>

Answer 2

Попробуйте:

HTML

<input type="checkbox" id="html">
<label for="html" class="rodo-checkbox"></label><p class="disclaimer">I agree to the terms of service - <span style="text-decoration: underline;">read the Terms of Service</span></p> <i class="fa fa-angle-right rodo_icon-right" aria-hidden="true"></i>

CSS

input[type=checkbox] {
  display: none;
}

p.disclaimer{
  vertical-align: middle;
  display: inline-block;
}

label {
  position: relative;
  cursor: pointer;
  text-transform: initial;
  display: inline-block;
  width: 35px;
  height: 35px;
  background: transparent url(https://image.ibb.co/dNKnvf/check.png);
  background-position: 0 0;
  vertical-align: middle;
  margin-right: 10px;
}

input:checked+label {
  background-position: 35px 0;
}

ДЕМО ЗДЕСЬ

Answer 3

вверху css вы должны сначала сбросить стиль по умолчанию для флажка:

input[type="checkbox"] {
     -webkit-appearance: none !important;
     -moz-appearance: none !important;
     -ms-appearance: none !important;
     -o-appearance: none !important;
     appearance: none !important;
  border: 2px solid #000; 
  height: 26px;
  width: 26px;
  border-radius: 6px;
  cursor: pointer;
}

input[type="checkbox"]:focus {
  outline: none;
}