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

Handsken · Answer 1 · 2016-06-30T09:14:33.023

1

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

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

<style>
    input{
      display:none
    }
    label{
      padding:0 6px;
      border:1px solid #eee
    }
    input:checked + label {
     background:#000;
     color:#fff
    }
</style>

JSFIDDLE

edited Jun 30 '16 at 09:14

answered Jun 30 '16 at 08:46

Handsken

639
9
26

your right @Paulie_D, now i've edited – Handsken Jun 30 '16 at 09:14
please mark as complete if your satisfied @RohithSai – Handsken Jun 30 '16 at 18:27

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

1 Answers1