如何在 div 或 iframe 等其他元素上模拟活动输入或 textarea 周围的 Chrome/Safari 边框?
Posted
技术标签:
【中文标题】如何在 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)'检查就足以避免这个问题。以上是关于如何在 div 或 iframe 等其他元素上模拟活动输入或 textarea 周围的 Chrome/Safari 边框?的主要内容,如果未能解决你的问题,请参考以下文章
关于div包裹imgiframe等标签会多3px或4px的问题