Remove border from Editable Text1 component

App Building
1

Hello,

When the Editable Text1 has focus, there is a slight blue border around it:

image
image974×300 14.7 KB

How can we delete or hide this?

Thanks! :pray:

Patrick

2

Hello, Here is workaround.

image
image1673×646 38.9 KB

._retool-editableText1 ._0Puzs.shouldUseV3Styles._0x-sX{
 box-shadow:none;
 border:none;
}

If you want to debug css yourself.
Here is good tool - Emulate a focused page, using this tool you can inspect html element that disappears from DOM on lost focus as in this case.(I take me hours to find this tool :joy:)

image
image795×711 40.3 KB

As state in office docs. Its style or class name change over time, at that time
you may need to update the class path again.

1 Like
3

Thank you @AnsonHwang! Works great!

I was wondering, HOW did you find out that "._retool-editableText1 ._0Puzs.shouldUseV3Styles._0x-sX" is the CSS selector for that component?

:sweat_smile:

Patrick

4

use chrome devtool to inspect css