如何在其他元素(如div或iframe)上模拟活动输入或textarea周围的Chrome/Safari边框？

Question

我使用简单的textarea元素,然后用iframe替换为designMode ='on',以便用户可以标记一些文本并使其成为斜体.但我仍然希望iframe看起来像textarea,所以我需要一个边框,类似于当textarea处于活动状态时Chrome和Safari中出现的边框.我怎样才能达到这样的效果？

Answer 1

您可以在webkit中获得如下所示的圆形轮廓:

outline: 2px auto red;

请注意,轮廓的宽度不符合指定的宽度,颜色也不完全准确.

要使用普通焦点颜色,您可以这样做:

outline: 2px auto -webkit-focus-ring-color;

在moz中,您可以使用-moz-outline-radius(就像border-radius一样)来获得圆形轮廓.

Answer 2

我通过以下方式解决了我的问题。

\n\n

当我第一次需要突出显示 iframe 时，我\xe2\x80\x99m 创建具有负“左”坐标的文本区域（以便它\xe2\x80\x99s 对用户不可见），给它一个焦点并通过window.getCompulatedStyle。然后我\xe2\x80\x99m 将其中四个属性应用于聚焦的 iframe：“outline-color”、“outline-style”、“outline-width”和“outline-offset”。

\n\n

由于某种原因，Safari 5 不会\xe2\x80\x99 为您提供正确的“轮廓偏移”值。所以暂时我将其硬编码为“-2px”。

\n