Sobes.tech
Junior

How to change the styles of buttons with the 'disabled' attribute?

sobes.tech AI

Answer from AI

/* Selector for 'disabled' attribute */
button[disabled] {
  opacity: 0.6; /* Example: make the button less transparent */
  cursor: not-allowed; /* Example: change cursor */
  background-color: #ccc; /* Example: change background color */
  color: #666; /* Example: change text color */
}

/* For the ':disabled' pseudo-class */
button:disabled {
  /* Same styles apply */
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #ccc;
  color: #666;
}

You can also use combinations of selectors, for example:

.my-button[disabled] {
  /* Styles for a specific button */
}

It is important to remember CSS specificity. Styles applied through a selector with an attribute or pseudo-class :disabled can be overridden by more specific rules.