Hello, The last update uniform focus style has a new mixin which is add an outline the input fields, selections and other… This is a great for accessibility but we use a border-radius: 4px on input fields. Is that possible to override mixins or add a border-radius: 0 into the core mixins.scss and this generate border-radius: 4px to 0 on focus? On the left it looks like now and right is after border-radius: 0; :arrow_down: [Screenshot 2021-02-04 at 15.22.25] [Screenshot 2021-02-04 at 15.22.45] Thank you! :slight_smile: @mixin default-focus() { border-color: var(--tertiary); + border-radius: 0; outline: 1px solid var(--tertiary); outline-offset: 0; }

Ah, I see. I think your best bet is to handle this in your theme, because core already has the border set to 0 for all input elements: app/assets/stylesheets/common/base/discourse.scss main body { So, in your theme, what you can do is override the focused input element’s border-radius in the same place where you are now setting it to a value. If you want to keep the rounded corners on focus, you could also do something like this: input { border-radius: 4px; &:focus { outline: none; box-shadow: 0px 0px 0px 1px var(--tertiary); } } (The outline property cannot have rounded corners, so the above switches to using a solid shadow to replace it.)

We have an internal theme that has rounded corners for buttons, and I don’t see a similar issue as yours. Can you provide maybe a bit more context, i.e. a larger screenshot so I can see which button this is? Let me know if you are using a public theme, I’m sure this is fixable.

Thank you so much! :slight_smile: I will do this. One more question… Is that not a bad practice if i disable the outline? I mean the accessibility reason.

Mixins default focus question

Product Support

pmusaraj (Penar Musaraj) February 4, 2021, 4:03pm 8

I think it’s OK given that you would be using something else to style the element in focus.

Topic		Replies	Views
How to round all input-fields in Discourse? Development css	4	480	January 31, 2024
CSS class of focused combo box UX	3	742	March 7, 2020
All border-radius from chat are being removed UX chat , completed	2	268	July 13, 2023
Override border-radius variables with theme UX	7	1339	December 8, 2022
Square CSS outline on radio buttons in 2.7.0 b4 UX	1	508	February 22, 2021

Mixins default focus question

Related topics