[css/js] Button disabled vs active

[colaholiker]

Hallo allerseits,

ich habe in css meinen Buttons diese active-Funktion zugefügt:

.act-button:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

In js deaktiviere ich einen der Buttons:

    function button_grau() {
        const
            btn_save = document.getElementById("infos_speichern");
        btn_save.disabled = true;
    }

Er wird also ausgegraut und soll nicht mehr reagieren.
Trotzdem spricht er beim Klicken auf oberen css-Code an.

Wie verhindere ich das?
TIA,
C.

 

[tk1234]

Er wird also ausgegraut und soll nicht mehr reagieren.

Das "nicht reagieren" ist im Prinzip nur eine Darstellung in den Stylesheets des Browsers die den Button so aussehen lässt als dass er keine Funktion hätte. Genau da liegt auch dein Problem: die von dir gesetzten Eigenschaften werden vom Browser bei deaktivieren Buttons nicht überschrieben, gelten also weiterhin. Was du allerdings machen kannst: deine Eigenschaften sollen ja für aktive Buttons gelten allerdings nicht für solche die deaktiviert sind - es bietet sich also an den Selektor um einen :not()-Selektor in Kombination mit einem :disabled-Selektor zu ergänzen.

 

[colaholiker]

Ja das klappt (erstmal im Test)!

.act-button:not(:disabled):active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

Vielen Dank tk1234.