samedi 30 mars 2019

How to increase clickable area of checkbox for touch screen

I'm trying to increase the clickable area for a checkbox in label.

However, there are also 2 anchor tags in it, and when I try to click on the checkbox on tablet, I get redirected to the hyperlink because the clickable area for checkbox is small, but the area for anchor tag is bigger.

I need to make both of them clickable on tablet, but be able to click on the checkbox too.

Here is the current layout. Since I also can't address :before as a DOM element on jQuery, I can't also modify it. Is there any recommendations ?

[type="checkbox"]:not(:checked)+label:before,
[type="checkbox"]:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    border: 1px solid #000;
    background: transparent;
}




Aucun commentaire:

Enregistrer un commentaire