How to remove dotted outline from iframe in Firefox when tabbed

问题

Is it possible to remove the dotted outline from an iframe in Firefox?

Setting the outline property in CSS doesn't work.

HTML:

<iframe width="50" height="50"/>

CSS:

iframe { outline: 0 }

Here's a jsfiddle that reproduces this issue. http://jsfiddle.net/6sHkw/1/

Edit

Sorry guys, I wasn't clear with my question.

With the above jsfiddle, the dotted outline appears if you tab to the iframe. I would like to make it so that the dotted outline does not appear when you tab to it. Neither border: 0 nor frameborder=0 works.

回答1:

The dotted focus outline is in the document inside the iframe, not on the iframe itself. You can see the same thing with the main browser viewport as well.

I don't believe you can turn it off via styles. It's an accessibility feature: if people are using tab navigation the assumption is that they want to actually see where they are in the tab order. Otherwise it quickly gets completely unusable.

回答2:

Add the following

iframe {
    border:0px;
}

jsFiddle works in all browsers.

The fiddle will be blank, as there is no src in the iframe.

回答3:

you can also set it from the markup (iframe has a frameborder property)

<iframe width="50" height="50" frameborder="0"/>

Working Fiddle:

Caution: this in no longer supported in HTML5, so use CSS styling instead (like the other answers)

来源：https://stackoverflow.com/questions/18773519/how-to-remove-dotted-outline-from-iframe-in-firefox-when-tabbed