how to get checkbox with '-' minus symbol inside check box using css only?

Question

get a minus "-" symbol inside checkbox using html and css only

I tried using

document.getElementsByTagName("input")[0].indeterminate = true;

but requirement is using html and css only

You can use the after pseudo class and absolute position it. See http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css, that seem to have many solutions to your question. — Arathi Sreekumar, Jun 30 '16 at 08:43
do you mean "-" for the replacement of check mark? please show your code as well — Lucian, Jun 30 '16 at 08:55
use can use input indeterminate https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_indeterminate — Sooraj s, May 06 '22 at 13:26

score 2 · Accepted Answer · edited Nov 11 '22 at 16:26

2

It sounds like you want a label posing like a checkbox, with a minus symbol inside. Like this:

input {
  display: none
}

label {
  padding: 0 6px;
  border: 1px solid #eee
}

input:checked+label {
  background: #000;
  color: #fff
}

<div>
  <input type="checkbox" id="box">
  <label for="box">-</label>
</div>

edited Nov 11 '22 at 16:26

kelsny

answered Jun 30 '16 at 08:46

Handsken

1

your right @Paulie_D, now i've edited – Handsken Jun 30 '16 at 09:14
1

please mark as complete if your satisfied @RohithSai – Handsken Jun 30 '16 at 18:27

1 Answers1