Remove focus outline in Safari / WebKit

How can I remove the ugly default blue outline that Safari (Webkit) applies to CKEditor when the editor is focused?

Normally you can do this with CSS, but I'm not sure which element to apply the CSS to, ex:

textarea:focus { outline: none; }

I will be adding other visual cues to inform the user the editor is selected, but I REALLY want to get rid of that unsightly blue box.

Thanks.

Attachments:

Ugly default outline

Wed, 03/10/2010 - 21:15

petera

Joined: 26/02/2010

Posts: 11

Re: Remove focus outline in Safari / WebKit

Hi,

Try to locate the element "span.cke_browser_gecko18" in the css-file of the skin, and add your "outline:none;" there. This rule also applies to safari/webkit.

/Peter

Wed, 08/24/2011 - 08:03

manifestinteractive

Joined: 24/08/2011

Posts: 1

Re: Remove focus outline in Safari / WebKit

To get this fixed add the following CSS to the end of your ./skins/kama/editor.css file

.cke_skin_kama span.cke_browser_webkit,.cke_skin_kama span.cke_browser_gecko18 {
   outline: none !important;
}

Note the

!important

... if you leave that out, it will not work.

I have tested this and it works fine for both Safari and Google Chrome.

- Peter Schmalfeldt