forum

Home / DeveloperSection / Forums / How to change the style of disabled and checked checkboxes?

Ask Question
Steilla Mitchel

Steilla Mitchel

Follow
I completed my post-graduation in 2013 in the engineering field. Engineering is the application of science and math to solve problems. Engineers figure out how things work and find practical uses for scientific discoveries. Scientists and inventors often get the credit for innovations that advance the human condition, but it is engineers who are instrumental in making those innovations available to the world. I love pet animals such as dogs, cats, etc.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

18-Aug-2023

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.

Liked By