CSS to convert an checkbox to look like an Intermediate checkbox without using JavaScript

Question

How can I convert a normal Checkbox to look like an intermediate checkbox using CSS without JavaScript?

For the following DOM elements, what would be the CSS in class intermediate-checkbox to make it look like an intermediate checkbox?

<div class="checkbox">
            <label>
                <input type="checkbox" class="intermediate-checkbox>

                 Intermediate Checkbox
            </label>
 </div>

A quick Google result https://codepen.io/CreativeJuiz/pen/BiHzp — Morpheus, Jun 28 '17 at 08:28
I would like to know the answer to this question as well. As far as I know it isn't possible to set an indeterminate state on a checkbox without javascript. — Cristophs0n, Jun 28 '17 at 08:39
@Martin which part of it? Does it use javascript? It is css only solution so I don't get your comment — Morpheus, Jun 28 '17 at 08:48
@Morpheus have you even run that codepen for yourself? it has two stages, empty and ticked it does **not** have three stages which is what the OP is asking for. `Empty` -- `Intermediate` -- `Checked` — Martin, Jun 28 '17 at 08:49
@Martin ah, missed that part :) images got my attention initially — Morpheus, Jun 28 '17 at 08:51
To be fair, it wasn't expressed by the OP (`TheKojuEffect`: ***edit your question to clarify***) but by the term "intermediate" I assume they want a 3 stage tickbox. @Morpheus — Martin, Jun 28 '17 at 08:52
If that is the case, I don't think it is possible in css only. `any element whose indeterminate DOM property is set to true by JavaScript.` - https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate — Morpheus, Jun 28 '17 at 08:55
[A similar (high ranking) question and answer which states it needs a Javascript interface](https://stackoverflow.com/questions/1726096/tri-state-check-box-in-html) — Martin, Jun 28 '17 at 08:59
@Martin I just want the checkbox to look like an intermediate checkbox. I'll update the question. Thanks guys. — TheKojuEffect, Jun 28 '17 at 09:01
@Morpheus I take back my criticism; it seems the OP does still only want a *two* step checkbox, but they didn't clarify this in the question. — Martin, Jun 28 '17 at 09:08
a 3 steps check could be faked in CSS given 3 dfferent style to the label and hidding the input. pointer-events would help and :before to insert the checkmark : https://codepen.io/gc-nomade/pen/xrpwpJ anyhow, the label will be there to be styled. Intermediate state might be avalaible in a quantum state:) but it confused everyone here — G-Cyrillus, Jun 28 '17 at 09:17

score 2 · Answer 1 · edited Jun 28 '17 at 09:05

2

you can use below css to get the same

input[type="checkbox"].hidden {
  display: none;
}

.demoCheck {
  border: 1px solid #ddd;
  width: 25px;
  height: 25px;
  display: block;
}

input[type="checkbox"]:checked.hidden+label {
  background: tomato;
}

input[type="checkbox"]:checked.hidden+label:after {
  content: '';
  display: block;
  width: 10px;
  height: 1px;
  background: #fff;
  margin: 12px auto;
}

<input type="checkbox" class="hidden" id="demo">
<label for="demo" class="demoCheck demoCheckLabel"></label>

edited Jun 28 '17 at 09:05

Abhishek Pandey

13,302
8
38
68

answered Jun 28 '17 at 08:39

LKG

4,152
1
11
21

This only has two views: empty and intermediate. No tick. – Martin Jun 28 '17 at 08:41
Same i posted . – LKG Jun 28 '17 at 08:42
1

@LokeshGupta This does not answer the OP's questions, it only changes the display but does not change the actual value. – Koby Douek Jun 28 '17 at 08:43
@LokeshGupta Is it possible to do it without using image? – TheKojuEffect Jun 28 '17 at 08:44
@TheKojuEffect easy use an SVG data blob in the CSS – Martin Jun 28 '17 at 08:46
Image use is easiest way to get it but if you need it without image, u can use background color or use before and after to get it – LKG Jun 28 '17 at 08:47
1

a single :before is enough to show the checkmark, background or shadow can be used when unchecked. pointer-events can even fake an intermediate state at screen (3 steps : unchecked, unchecked but restyled, checked) . CSS can do weird things sometimes ;) https://codepen.io/gc-nomade/details/xrpwpJ/ – G-Cyrillus Jun 28 '17 at 09:56

CSS to convert an checkbox to look like an Intermediate checkbox without using JavaScript

1 Answers1