How to change the style of disabled and checked checkboxes?

Question

Aryan Kumar · Answer

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

.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

.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.

forum

How to change the style of disabled and checked checkboxes?

Can you answer this question?

1 Answers