[yen223]

This is the kind of stuff we have to do because almost all browser <input> elements are terrible in terms of customisability. Especially radios and selects

If you're one of those who think we should just use the default, bear in mind that the default radio button has poor usability for mobile users.

[barryvan]

There are lots of ways to style these native controls, though, including ways to start from scratch and retain the accessibility affordances.

I'd be curious to know more about the usability issues you've found on mobile -- I've not had any personally when using radio buttons. I'll readily grant you that 'select' is awful everywhere though!

[DrewADesign]

It’s a lot easier now than it used to be. Radio buttons used to be nearly impossible to style, and I still think they require scripting to de-select— so none in a group are selected after one has been selected. I’ll bet most of the complexity in the article is some combination of keeping support for older browsers, technical debt, and nobody complaining about it because it works.

[spiderfarmer]

> bear in mind that the default radio button has poor usability for mobile users

Wrap it in a label, give the label a padding. Boom!

[archerx]

The only <input> that is annoying to style is the “select” one because it’s hard to style the “options”. The rest seem reasonable and quite customizable in my experience.

[christophilus]

The date picker still sucks.

[dbbk]

And even select is fully customisable now if you're targeting modern browsers

[ruszki]

The article explains how to style radio buttons with CSS however you want. What’s the problem with that?

[supermatt]

It doesn’t.

It gives a very naive approach that doesn’t support any complex styling.

For that you need to wrap the input and additional styling elements in a ref’ed label.