0

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?

DoneDeal0
  • 5,273
  • 13
  • 55
  • 114
  • 1
    _“I know I should play with :before pseudo elements”_ - no, you rather shouldn’t - at least not this way. Pseudo elements render as if they were _children_ of the element they are applied to, but `input` is an _empty_ element, by definition. Not all browsers support applying pseudo elements to input fields. – CBroe Mar 02 '21 at 14:31
  • 1
    _“I would like to keep things very simple with a classic input, and no custom input above a hidden one.”_ - common solutions use the `label` element that accompanies the input, to place the generated content in there. (And if your input does not have a label yet, then you should add one - otherwise, that is bad usability to begin with.) – CBroe Mar 02 '21 at 14:31

0 Answers0