我使用的是简单的textarea元素，然后用iframe替换为designMode ='on'，以便用户可以标记一些文本并使其成为斜体。但我仍然希望iframe看起来像textarea，所以我需要一个边框，类似于当textarea处于活动状态时Chrome和Safari中出现的边框。我怎样才能达到这样的效果？
答案 0 :(得分：18)
您可以在webkit中获得如下所示的圆形轮廓：
outline: 2px auto red;
请注意，轮廓的宽度不符合指定的宽度，颜色也不完全准确。
要使用普通焦点颜色，您可以这样做：
outline: 2px auto -webkit-focus-ring-color;
在moz中，您可以使用-moz-outline-radius（就像border-radius一样工作）来获得圆角轮廓。
答案 1 :(得分：3)
您可以使用:focus伪造选择器和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 |
+----------------------+------------------------------------------------------------------+
答案 2 :(得分：2)
我发现了一篇提及浏览器特定颜色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>
答案 3 :(得分：1)
我以下列方式解决了我的问题。
当我第一次需要突出显示iframe时，我正在创建具有负“左”坐标的textarea（这样它对用户是不可见的），给它一个焦点并通过window.getComputedStyle获取它的CSS属性。然后我将其中四个属性应用于聚焦iframe：'outline-color'，'outline-style'，'outline-width'和'outline-offset'。
出于某种原因，Safari 5不会为'outline-offset'提供正确的值。因此，我暂时将其硬编码为'-2px'。