How to customize a checkbox checkmark? [duplicate]

I am trying to change the checkmark of an input checkbox. Basically, I would like to display - instead of v inside the input when checked.

I know I should play with :before pseudo elements and display a "-" in the content key, but I can't achieve a proper result. If possible, I would like to keep things very simple with a classic input, and no custom input above a hidden one.

I have this html/css for the moment:

<input type="checkbox"/>

input{
  position:relative;
&:before{
  content: '-';
  background:black;
  }
}

How would you fix this?