Chrome now defaults to rounded buttons?
over 5 years ago from Jake Haugen, Designer. Thinker. Loves making faces at dogs when no one is looking.
What the hell? You just assume anyone who didn't specify "border-radius: 0" wants rounded corners?
over 5 years ago from Jake Haugen, Designer. Thinker. Loves making faces at dogs when no one is looking.
What the hell? You just assume anyone who didn't specify "border-radius: 0" wants rounded corners?
Any actual web professional should be using a CSS reset file. These sorts of changes from chrome have no impact on my workflow.
This doesn't seem to be covered by either Normalize.css or Reset.css, the two most popular resets. (I imagine it'll make its way into a Normalize update shortly.)
Rounded corner buttons look more like buttons.
Google is so big that if they have a weird interaction, it will affect user behaviour on the web in a big way..
I don't understand the concern. The changes were applied to the MacOS version in order to match OS defaults. This is a good thing. If you are concerned with your/your client's brand, then make the changes in your CSS.
There's a reason many UX professionals prefer to default to the OS' default behavior and it isn't personal.
they're pushing all the rounded corners HARD everywhere- on their own site, on mobile, ahead of changing anything on their Material Design guides. So annoying
Not seeing it on my end. Which version of Chrome are you on? I'm on 63, testing with: https://codepen.io/cgallello/pen/wPJmOV
My user agent stylesheet:
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button { border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186); border-style: solid; border-width: 1px; padding: 1px 7px 2px; } user agent stylesheet input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button { align-items: flex-start; text-align: center; cursor: default; color: buttontext; background-color: buttonface; box-sizing: border-box; padding: 2px 6px 3px; border-width: 2px; border-style: outset; border-color: buttonface; border-image: initial; } user agent stylesheet input, textarea, select, button { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 400 11px system-ui; } user agent stylesheet input, textarea, select, button, meter, progress { -webkit-writing-mode: horizontal-tb; } user agent stylesheet button { -webkit-appearance: button; }
Oh god I'm so sorry I don't understand how to markdown
Works only, when you apply basic styling. Example rounded corners in Chrome
The chrome team has already decided to undo the change
Can someone please post a before and after pic?
It's not showing up.
It's deffo there, just an imgur link issue I think. Now re-saved it, but by all means the joke is now ruined haha!
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now