Display a element with a box in the middle rather than a checkmark

Question

I am wondering if anyone knows of a good way to display a checkbox in html with a black box in the middle, like the third checkbox in the image below?

different checkbox appearances

I have seen this in a lot of interfaces, but can't find a good one online to check source. Apologies if this is already posted elsewhere but I have not had luck with the search terms I have been trying.

Thanks.

You might find [this question](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) helpful. — Ryan Stein, Jan 09 '13 at 20:27
if you are okay with using CSS3, then I would recommend modifying the code in this link to suit your needs http://cssdeck.com/labs/css-checkbox-styles edit: I see that malkassem actually posted the same link before I did :) — , Jan 09 '13 at 20:31

score 7 · Answer 1 · answered Jan 09 '13 at 20:26

7

It's called the indeterminate state. See this jsFiddle example.

$("#c").prop("indeterminate", true);

Ref: https://developer.mozilla.org/en-US/docs/HTML/Element/Input and https://developer.mozilla.org/en-US/docs/CSS/:indeterminate

answered Jan 09 '13 at 20:26

j08691

204,283
31
260
272

1

Thanks. To me that looks more like a disabled checkbox though. I appreciate that it's the standard display for indeterminate, but I don't think a lot of users will see it that way. If anyone did know how to do the box that would still be great... – Owen Jan 09 '13 at 20:29
@Owen - here's an example of how the indeterminate state looks as compared to the disabled state: http://jsfiddle.net/j08691/7D4zx/1/. Quite different IMO. – j08691 Jan 09 '13 at 20:31
@j08691 Thanks for your help. I've accepted the answer from malkassem because I think it is the best solution to the specific challenge of displaying a checkbox with a square inside, but if I could fork from this question than I would accept your answer as well because also quite useful :). Thanks again. – Owen Jan 09 '13 at 20:54

score 3 · Accepted Answer · edited May 23 '17 at 12:21

3

The following post contains some examples:

How to style checkbox using CSS?

There is link in the answer Collection of checkbox styles from CSSDeck contains similar examples.

edited May 23 '17 at 12:21

Community

1
1

answered Jan 09 '13 at 20:27

malkassem

1,937
1
20
39

score 0 · Answer 3 · answered Jan 09 '13 at 20:26

Checkboxes are rendered by the browser. Thus the style is determined by the application chosen by the user. If you want to have customized form controls, you will have to use something like jQuery UI or something similar, which will basically simulate a form control with other means and store the value in a hidden form field.

Display a element with a box in the middle rather than a checkmark

3 Answers3