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

Posted 2023-05-07

【中文标题】如何在 div 或 iframe 等其他元素上模拟活动输入或 textarea 周围的 Chrome/Safari 边框？

【英文标题】：How to simulate Chrome/Safari border around active input or textarea on other elements such as divs or iframes?

【发布时间】：2011-04-17 11:14:55

【问题描述】：

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

【参考方案1】：

你可以像这样在 webkit 中得到圆形轮廓：

outline: 2px auto red;

请注意，轮廓的宽度不会服从指定的宽度，颜色也不完全准确。

要使用正常的焦点颜色，您可以这样做：

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

在 moz 中，您可以使用-moz-outline-radius（与border-radius 类似）来获得圆形轮廓。

【讨论】：

-webkit-focus-ring-color 正是我们所需要的。不幸的是，像 -webkit-focus-ring-width 和 -webkit-focus-ring-offset 这样的常量似乎不见了。

如你所见，Sarari 渲染 'outline: 2px auto -webkit-focus-ring-color' 完全不同：matholymp.org.ua/_temp/outline.png（上面是原始的 5px 宽度 -2px 偏移，下面是2px 宽度）。

【参考方案2】：

您可以使用:focus psuedo-selector 和outline 属性：

`.elementClass:focus 
    outline: 1px solid #ffa;

这将为元素添加黄色轮廓，我不确定 Chrome 和 Safari 使用什么颜色，但只需添加您喜欢的颜色即可。

---

编辑

以回应 OP 的评论：

不幸的是，这种边框在 Chrome 和 Safari 中是不同的（也许在其他支持或将支持它的浏览器中）。因此，如果我能准确模拟每个用户习惯的那种边框，那将是完美的。

CSS 中有一些特定于平台/操作系统的颜色可用（尽管浏览器的实现显然会有所不同）：

+----------------------+------------------------------------------------------------------+
|  ActiveBorder        |                                            Active window border  |
|  ActiveCaption       |                                           Active window caption  |
|  AppWorkspace        |                 Background color of multiple document interface  |
|  Background          |                                              Desktop background  |
|  ButtonFace          |                              Face color for 3D display elements  |
|  ButtonHighlight     |    Dark shadow for 3D display elements (facing away from light)  |
|  ButtonShadow        |                            Shadow color for 3D display elements  |
|  ButtonText          |                                            Text on push buttons  |
|  CaptionText         |              Text in caption, size box, and scrollbar arrow box  |
|  GrayText            |            Grayed (disabled) text (#000 if not supported by OS)  |
|  Highlight           |                                   Item(s) selected in a control  |
|  HighlightText       |                           Text of item(s) selected in a control  |
|  InactiveBorder      |                                          Inactive window border  |
|  InactiveCaption     |                                         Inactive window caption  |
|  InactiveCaptionText |                            Color of text in an inactive caption  |
|  InfoBackground      |                           Background color for tooltip controls  |
|  InfoText            |                                 Text color for tooltip controls  |
|  Menu                |                                                 Menu background  |
|  MenuText            |                                                   Text in menus  |
|  Scrollbar           |                                            Scroll bar gray area  |
|  ThreeDDarkShadow    |                             Dark shadow for 3D display elements  |
|  ThreeDFace          |                              Face color for 3D display elements  |
|  ThreeDHighlight     |                         Highlight color for 3D display elements  |
|  ThreeDLightShadow   |          Light color for 3D display elements (facing the light)  |
|  ThreeDShadow        |                             Dark shadow for 3D display elements  |
|  Window              |                                               Window background  |
|  WindowFrame         |                                                    Window frame  |
|  WindowText          |                                                 Text in windows  |
+----------------------+------------------------------------------------------------------+

来源：http://blogs.sitepoint.com/2009/08/11/css-system-styles/

不过，我不知道可以应用任何特定于浏览器的选项。您或许可以使用 javascript 从特定浏览器中查找颜色，但由于访问伪选择器的困难，我不相信这会奏效。

【讨论】：

好吧，不幸的是这种边框在 Chrome 和 Safari 中是不同的（也许在其他支持或将支持它的浏览器中）。因此，如果我能准确地模拟每个用户习惯的那种边框，那将是完美的。

感谢您提出使用 JavaScript 查找边框颜色的想法。我使用它并解决了我的问题。有趣的是，一些特定于操作系统的颜色在 CSS 中可用，尽管很难想到应用程序。

@Danylo，我能想​​到人们可能想要模仿特定于平台的警报的几个原因......对于网络应用程序来说这也是一个好主意，让他们更多地关注-家？你用什么 JS 来查找特定于浏览器的颜色？

我使用了类似这样的代码：[var textarea=document.createElement('textarea'); document.body.appendChild(textarea); textarea.focus(); var color=window.getComputedStyle(textarea,null).getPropertyValue('outline-color');] 我在下面的回答中更详细地描述了该方法。

【参考方案3】：

我发现一篇文章提到了浏览器特定颜色 for FireFox 和 for Safari/Chrome。

我试图在 javascript 中读取对焦环颜色，以便可以柔化它并在我们的 UI 中使用它，但我放弃了。这是我正在使用的测试代码：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="hellowebkit" style="outline: 5px auto -webkit-focus-ring-color;">outline: 5px auto -webkit-focus-ring-color</div>
        <div style="outline: 5px auto green;">outline: 5px auto green</div>
        <div style="outline: 5px auto -moz-mac-focusring;">outline: 5px auto -moz-mac-focusring</div>
        <div style="background-color:-webkit-focus-ring-color;">-webkit-focus-ring-color</div>
        <div style="background-color:-moz-mac-focusring;">-moz-mac-focusring</div>
        <div id="hello" style="color:highlight;">hello</div>
        <button id="btn" onclick="readval()">readval()</button>
        <button id="btn" onclick="readPropertyVal()">readPropertyVal()</button>
        <input id="inp" value="input" />
        <div id="test">test</div>
        <script>
            function readval() 
                    var hello = document.getElementById('hello');
                    var style = hello.currentStyle || getComputedStyle(hello, null);
                    var color = style.color;
                    var currentColor = style.currentColor;
                    var hellowebkit = document.getElementById('hellowebkit');
                    var hellowebkitStyle = hellowebkit.currentStyle || getComputedStyle(hello, null);
                    var outlineColor = hellowebkitStyle.outlineColor;
                    alert('color:' + color + ' currentColor:' + currentColor + ' outlineColor:' + outlineColor + ' color.match: ' + ('' + color).match(/rgb[(](\d+)[,]\s*(\d+)[,]\s*(\d+)[)]/));
                    var test = document.getElementById('test');
                    test.style.backgroundColor = '' + outlineColor;
               
            function readPropertyVal() 
                    //var inp = document.getElementById('hello');
                    //var inp = document.getElementById('btn');
                    var inp = document.getElementById('inp');
                    var color = getComputedStyle(inp, null).getPropertyValue('outline-color');
                    alert('color:' + color);
                    var test = document.getElementById('test');
                    test.style.backgroundColor = '' + color;
               
        </script>
    </body>
</html>

【参考方案4】：

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

当我第一次需要突出显示 iframe 时，我正在创建带有负“左”坐标的 textarea（这样它对用户不可见），给它一个焦点并通过 window.getComputedStyle 获取它的 CSS 属性。然后我将其中四个属性应用到聚焦 iframe：'outline-color'、'outline-style'、'outline-width' 和 'outline-offset'。

出于某种原因，Safari 5 不会为您提供正确的“轮廓偏移”值。所以暂时我把它硬编码为'-2px'。

【讨论】：

当心，window.getComputedStyle 在 IE 中不起作用...它为 dom 节点提供了一个 currentStyle 属性。 msdn.microsoft.com/en-us/library/ms535231.aspx

IE9 实现了getComputedStyle，以前的版本不画轮廓。所以'if(window.getComputedStyle)'检查就足以避免这个问题。