Css - стиль ввода флажка с js-взаимодействием

Question

Я пишу, потому что вижу, что эти ответы стареют и больше не работают

Как оформить флажок с помощью CSS?

Я хочу установить флажок в стиле и добавить его позже в сценарий js.

<label>Are you sure?
    <input type="checkbox">
</label>

Может кто-нибудь сказать мне, как это сделать в 2018 году?

Answer 1

Вы можете изменить стиль галочки с помощью псевдокласса: флажок.

input[type="checkbox"] {
  -webkit-appearance: none;
  border: 1px solid #0e0e0e;
  width: 20px;
  height: 20px;
  border-radius: 3px;
}

input[type="checkbox"]:checked {
  border: 1px solid red;
  position: relative;
}

input[type="checkbox"]:checked:after {
  content: "x";
}

<label>Are you sure?
  <input type="checkbox">
</label>

Answer 2

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

Для таргетинга JavaScript

var checkbox = document.querySelector('input[type="checkbox"]')


checkbox.addEventListener('change',function () {

  if(document.querySelector('input[type="checkbox"]:checked')){
    //returns true if element is checked 
    alert("I am checked");
  }
})

  <label>Are you sure?
      <input type="checkbox">
  </label>

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