Re: [csswg-drafts] [css-pseudo-4] Standardizing input[type="range"] styling (#4410)

I'd say one more problem is focus outline (focus ring).

When the height of the `<input>` element itself is less than the height of the handle/thumb, focus outline looks weird in Chromium:
![image](https://user-images.githubusercontent.com/20643126/169808040-ac91edd0-93dd-4e99-9edd-6963c8f09523.png)

It looks ok in Firefox though:
![image](https://user-images.githubusercontent.com/20643126/169808317-7228b5a3-f85a-4c67-ae27-f3a8e4da51cc.png)

-----

Disclaimer: I'm not a web developer, like at all.

-----

<details>
<summary>demo</summary>

Here's a (somewhat functional) demo where I automated basic hacks inspired by @thebabydino's [great article](https://css-tricks.com/sliding-nightmare-understanding-range-input/) so the slider looks the same across browsers:
https://toughengineer.github.io/demo/slider-styler/

Feel free to tinker with it. (Please tell me if you break it.)

Hope it's helpful.  
Otherwise it's probably stupid so you may as well ignore it.
</details>

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


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

Received on Monday, 23 May 2022 11:35:22 UTC