Re: [csswg-drafts] [css-box] increase pointer target size independently of element layout (#4708)

I have discovered a method that appears to work that is not as elegant as the proposed solution, but far more ergonomic and sensible than unstyling semantic elements to style children inside of them, or perhaps the clipping method mentioned above.

```css
label { 
    padding: 5px;
    width: calc(100% + 10px);
    position: relative;
    top -5px;
    left: -5px;
}
```

```html
<label><button>Hello!</button></label>
```

I had this thought because I noticed that you can use `<label>` to increase the target size of a checkbox or radio button and I thought the rule may apply generally.

I'm not sure what type of trickery may be necessary if things are bunched closely together, but this worked for my immediate use case.

I'm a complete CSS novice (backend dev), so I would be very interested if anyone has an innovation to add to this method which would be more appropriate while we wait for a better solution to make its way into the standards, and then browsers.

-- 
GitHub Notification of comment by coolaj86
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4708#issuecomment-824256501 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 21 April 2021 18:08:35 UTC