Button inside a label

Question

I have a label with \"for=\"the pointer to the checkbox input\"\" and as long as I know, this for can be added only for label

Answer 1

The best solution is to style is like a button.

If you're using a CSS framework, like bootstrap, you can give the label classes such as btn and btn-default. This will style it like a button. You may need to adjust the css property of the line-height manually like so:

label.btn {
    line-height: 1.75em;
}

Then, to get the on click styles as a button, add these styles:

input[type=radio]:checked ~ label.btn {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
}

This will take the input that is checked and give the next label element in the dom that has the class btn, bootstrap btn-default button clicked styles. Adjust colors as fit.