Telerik controls issue in Chrome

Question

User1536465747 posted

Hello,

Since recently I noticed that Chrome browsers adds this odd border around the controls. It happens on focus event.

So far, I've noticed that it happens with TextBox and RadGrid but possibly it happens with other controls too. 

When you inspect elements in Chrome there is no such style.

This black border is not visible in the other browsers. Only Chrome

Thx

Answer 1

User288213138 posted

Hi KulerMaster,

Since recently I noticed that Chrome browsers adds this odd border around the controls. It happens on focus event.

So far, I've noticed that it happens with TextBox and RadGrid but possibly it happens with other controls too. 

When you inspect elements in Chrome there is no such style.

This black border is not visible in the other browsers. Only Chrome

This is a browser compatibility issue, If you don’t want to display the border, then you can try to remove it using css.

Best regards,

Sam

Answer 2

User1536465747 posted

Thank you for the prompt reply!

Hmm I wish it were so easy

There is a class riFocused that is assigned to the control when it gets focused. However, overriding the border property didn't help. I tried with !important as well.

Any other ideas? Thx

Answer 3

User288213138 posted

Hi KulerMaster,

There is a class riFocused that is assigned to the control when it gets focused. However, overriding the border property didn't help. I tried with !important as well.

Because you are using a third-party control, I can’t test it for you.

I suggest you go to the Telerik forum for help.

Best regards,

Sam

Answer 4

User1536465747 posted

It was the outline property (User agent stylesheet) that Chrome sets automatically when an input control gets focused.

Thank you for the hint