---
title: "Discussion on \"Styling a checkbox with only CSS\" | Hashnode"
description: "Discussion on \"Styling a checkbox with only CSS\". This seems like an obvious statement; styling should be done with CSS. But unfortunately in the case of checkboxes, there's basically no support for directly styling the checkbox.\nBecause of that, I've seen several JavaScript implementations to chang..."
url: "https://hashnode.com/posts/styling-a-checkbox-with-only-css/60fec4eb1be2da0c4ab772a3"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Styling a checkbox with only CSS](https://www.kallmanation.com/styling-a-checkbox-with-only-css?utm_source=hashnode&utm_medium=feed)

This seems like an obvious statement; styling should be done with CSS. But unfortunately in the case of checkboxes, there's basically no support for directly styling the checkbox. Because of that, I've seen several JavaScript implementations to chang...

Jun 8, 2020 · 5 min read · kallmanation.com  
Read the article

-   [#css](https://hashnode.com/tag/css)
-   [#css3](https://hashnode.com/tag/css3)
-   [#tutorial](https://hashnode.com/tag/tutorial)

## Written by

[Nathan Kallman](https://hashnode.com/@kallmanation)

@kallmanation · Grand Rapids, MI

  
[View profile](https://hashnode.com/@kallmanation)

Following Jesus; Husband; Father; Tinkerer

Following Jesus; Husband; Father; Developer; Gamer; Tinkerer; Writing about code

## Responses 1

Markdown supported · ⌘↵ to post

[Jan Coenen](https://hashnode.com/@jamacoe)

[Sep 19, 2022](https://hashnode.com/posts/styling-a-checkbox-with-only-css/60fec4eb1be2da0c4ab772a3/comment/6328a872195e7dc741da620d)

Hi Nathan, is this really the first comment on this excellent article? - I've played a little arround with the code, introduced a class .cbx for the input checkboxes and substituted label > input\[type="checkbox"\] in the styles with cbx. Works as expected so far, but now I want to eliminate the labels alltogether from the HTML. The whole thing doesn't work without labels and I don't understand why. They are not mentioned in my style section anymore.

[Nathan Kallman](https://hashnode.com/@kallmanation)

[Oct 4, 2022](https://hashnode.com/posts/styling-a-checkbox-with-only-css/60fec4eb1be2da0c4ab772a3/comment/6328a872195e7dc741da620d#reply-633c369512186eae2bef69e3)

Hi Jan, I tend to have a bit more traffic on [my cross-posts to dev.to](https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p) but it's great to have you here!

A `<label>` wrapping the input and the, well, _label_ for that input is the semantic, idiomatic way to structure your HTML; so I wouldn't recommend trying to remove it. But no matter what I would expect you to need something in the `<label>` 's place wrapping the two elements in order for sibling and psuedo selectors to work well and give you the styling options needed to make it all look nice.