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
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);
}
I dont think there would be a pure CSS solution to this, I would go and use Javascript / jQuery for this:
$("input#toggle_button ~label").on("mousedown", function(){
$(this).addClass("pressed");
}).on("mouseup", function(){
$(this).removeClass("pressed");
});
Check this Codepen: http://codepen.io/kaoz70/pen/JKWXvx
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments