In CSS how do I style checkbox or radio button for pressed state apart from checked and not checked?

I am using invisible radio buttons and checkboxes with visible labels to create mode UI (single mode active at any time) and toggle buttons respectively. Ideally I want to have a different image for each of the following states

1. Unchecked
2. Pressed
3. Checked

I have used the following template. The :checked and :not(:checked) selectors are working. For buttons elements, :active seems to work for mouse down/pressed state. For checkboxes and radiobuttons, they don't seem to work. How do I do a style for just mouse down/pressed state?

    input#toggle_button:not(:checked) ~label{
      content: url(../assets/button_toggle_normal.png);
    }

    input#toggle_button:checked ~label{
      content: url(../assets/button_toggle_selected.png);
    }

    input#toggle_button:active ~label{
      content: url(../assets/button_toggle_pressed.png);
    }