Can you remove the border that appears when you click in a design area?

(Nat) #1

**Matrix Version:**5.3.4.2

I’m a newbie so I don’t know where to start looking to find an answer to this issue.

I’ve just added some tabbed content to a page on our intranet. When I click on any of the tabs, a blue border appears around the main container. It only disappears if I click outside that area. The attached image illustrates this.

I don’t want the blue border to appear at all when a tab is clicked on.

There’s a lot of legacy CSS I’m trawling through, which could be the issue. However, if anyone has any ideas or has come across the same problem, I’d appreciate a point in the right direction.

squiz border issue.jpg1342x780 170 KB

(Tim Trodd) #2

Hi,

I would recommend:

  1. Using Chrome or Firefox
  2. Click so that the blue border appears
  3. right click on the actual blue line and click inspect
  4. in the panel (usually on the right hand side) will show you the css styling which is making that border appear
  5. you should see that one of the values is border: xxxxxx
  6. you will probably need to remove the above (step 5) from the main css file for it to disappear
(Nat) #3

Thanks for the helpful feedback. I tried all of those steps and, unfortunately, the CSS revealed nothing. Persistence has paid off, though. It turns out my issue had to do with elements in focus.

I found an elegant line of CSS in another forum, which has resolved the issue:

*:focus {outline: none;}

Hopefully that’s of use to others who come across the same issue. :slight_smile: