JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="method" value="plus" checked>plus<br>
<input type="checkbox" name="method" value="minus">minus<br>

CSS

input[type=checkbox] {
  margin-right: 10px;
  cursor: pointer;
  font-size: 12px;
  width: 12px;
  height: 12px;
  position: relative;
}

input[type=checkbox]:after {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  content: "";
  background-color: #FFFFFF;
  display: inline-block;
  visibility: visible;
  padding: 0px 0px;
  border-radius: 0px;
  border: 1px solid black;
}

input[type=checkbox]:checked:after {
  content: "X";
  background-color: #FFFFFF;
  font-size: 12px;
  text-align:center;
}