WP-Mix

I’ve posted before about fixing weird default browser styles. It happens all too often. Well-intentioned browser developers taking liberties on the page with things like CSS styles. This post shares a quick code snippet that fixes the Chrome browser’s new “rounded corners” style that now is applied to form elements like buttons and inputs.

Save a kitten..

Needless to say, when browsers interfere with the appearance of web pages, bad things happen. Kittens are killed and ice cream melts onto the sidewalk. Dark times, people.

And it’s so sad, because it is SO EASY for browser developers to NOT screw up hundreds of thousands if not millions of web pages.

How? Don’t touch anything on the page.

If you want to make changes to the browser itself, like removing the Home button, that’s entirely your (horrible) call oh wise browser devs. BUT when it comes to projecting your own desires onto the page, like with rounding all the corners, DON’T DO IT. Hands off, dog. The page does NOT belong to you. STOP screwing up everyone else’s work with your stupid ideas.

Fixing stupid

So without further ranting, here is the magic slice of CSS to neutralize Chrome’s wacky rounded corner styles:

/* fix chrome rounded corners */
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button { border-radius: 0 !important; }

No changes need to made. Simply add and done. But you know they won’t stop with <abbr> underlines and rounded corners. So, until the next obtrusive overreach..