---
title: "How to change the style of disabled and checked checkboxes?"  
description: "How to change the style of disabled and checked checkboxes?"  
author: "Steilla Mitchel"  
published: 2023-08-17  
updated: 2023-08-18  
canonical: https://www.mindstick.com/forum/159548/how-to-change-the-style-of-disabled-and-checked-checkboxes  
category: "html"  
tags: ["form validation", "html element"]  
reading_time: 2 minutes  

---

# How to change the style of disabled and checked checkboxes?

How to change the [style](https://www.mindstick.com/articles/126300/apa-citation-style-get-to-know-about-it-for-your-next-assignment) of disabled and checked checkboxes?

## Replies

### Reply by Aryan Kumar

To change the style of disabled and checked checkboxes, you can use the `disabled` and `checked` CSS properties.

The `disabled` property disables the checkbox and prevents it from being checked. The `checked` property checks the checkbox.

The following CSS code changes the style of disabled and checked checkboxes:

CSS

```plaintext
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checked {
  background-color: #2196F3;
  border-color: #2196F3;
}
```

In this code, the `.disabled` class is applied to disabled checkboxes. The `opacity` property is set to 0.5, which makes the checkbox translucent. The `cursor` property is set to `not-allowed`, which prevents the checkbox from being clicked.

The `.checked` class is applied to checked checkboxes. The `background-color` property is set to #2196F3, which is the color of the checked checkbox. The `border-color` property is also set to #2196F3.

You can also use the `:disabled` and `:checked` pseudo-classes to style disabled and checked checkboxes. The following CSS code is equivalent to the previous code:

CSS

```plaintext
.checkbox {
  opacity: 1;
  cursor: pointer;
}

.checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox:checked {
  background-color: #2196F3;
  border-color: #2196F3;
}
```

In this code, the `.checkbox` class is applied to all checkboxes. The `:disabled` pseudo-class is applied to disabled checkboxes and the `:checked` pseudo-class is applied to checked checkboxes.


---

Original Source: https://www.mindstick.com/forum/159548/how-to-change-the-style-of-disabled-and-checked-checkboxes

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.