Hoe pas ik de stijlen van knoppen met het 'disabled'-attribuut aan?

/* Attribuut 'disabled' selector */
button[disabled] {
  opacity: 0.6; /* Voorbeeld: maak de knop minder transparant */
  cursor: not-allowed; /* Voorbeeld: verander de cursor */
  background-color: #ccc; /* Voorbeeld: verander de achtergrondkleur */
  color: #666; /* Voorbeeld: verander de tekstkleur */
}

/* Voor de pseudo-klasse ':disabled' */
button:disabled {
  /* Dezelfde stijlen worden toegepast */
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #ccc;
  color: #666;
}

Je kunt ook combinaties van selectors gebruiken, bijvoorbeeld:

.my-button[disabled] {
  /* Stijlen voor een specifieke knop */
}

Het is belangrijk om de specificiteit van CSS te onthouden. Stijlen toegepast via een selector met attribuut of pseudo-klasse :disabled kunnen worden overschreven door meer specifieke regels.