如何在其他元素(如div或iframe)的活动输入或文本区域周围模拟Chrome/Safari边框?
我使用了简单的textarea元素,然后将其替换为带有designMode='on'的iframe,使用户可以标记一些文本并将其倾斜。但我仍然希望iframe看起来像textarea,所以我需要一个边框围绕它,类似于当textarea处于活动状态时在Chrome和Safari中出现的边框。如何实现这种效果?您可以使用如何在其他元素(如div或iframe)的活动输入或文本区域周围模拟Chrome/Safari边框?,iframe,google-chrome,input,textarea,border,Iframe,Google Chrome,Input,Textarea,Border,我使用了简单的textarea元素,然后将其替换为带有designMode='on'的iframe,使用户可以标记一些文本并将其倾斜。但我仍然希望iframe看起来像textarea,所以我需要一个边框围绕它,类似于当textarea处于活动状态时在Chrome和Safari中出现的边框。如何实现这种效果?您可以使用:focuspsuedo选择器和outline属性: `.elementClass:focus { outline: 1px solid #ffa; } 这将为元素添加黄色
:focus
psuedo选择器和outline
属性:
`.elementClass:focus {
outline: 1px solid #ffa;
}
这将为元素添加黄色轮廓,我不确定Chrome和Safari使用什么颜色,但只需添加您喜欢的颜色即可
针对OP的评论编辑了:
不幸的是,这种边界在Chrome和Safari中是不同的(也许在其他支持或将支持它的浏览器中也是如此)。所以,如果我能精确地模拟每个用户都习惯的那种边界,那就太完美了 CSS中有一些特定于平台/操作系统的颜色(尽管浏览器实现显然有所不同): 资料来源:
不过,我不知道是否有任何特定于浏览器的选项可以应用。您可能可以使用JavaScript从特定浏览器中查找颜色,但我不相信这会起作用,因为访问伪选择器很困难。我用以下方法解决了我的问题 当我第一次创建带有负“左”坐标的textarea时,需要突出显示iframe(这样用户就看不见它),给它一个焦点,并通过window.getComputedStyle获取它的CSS属性。然后我将这些属性中的四个应用于聚焦iframe:“轮廓颜色”、“轮廓样式”、“轮廓宽度”和“轮廓偏移”
出于某些原因,Safari 5不会为“轮廓偏移”提供正确的值。因此,目前我将其硬编码为“-2px”。您可以在webkit中获得如下圆形轮廓:
outline: 2px auto red;
请注意,轮廓的宽度将不符合指定的宽度,并且颜色也不完全准确
要使用普通聚焦颜色,可以执行以下操作:
outline: 2px auto -webkit-focus-ring-color;
在moz中,您可以使用
-moz outline radius
(就像边框半径一样)来获得圆形轮廓。我发现一篇文章提到了浏览器特定的颜色和颜色
我试图用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>
外形:5px自动-webkit聚焦环颜色
外形:5px自动绿
概述:5px自动moz mac调焦
-webkit聚焦环颜色
-moz-mac聚焦
你好
readval()
readPropertyVal()
测试
函数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;
警报('color:'+color+'currentColor:'+currentColor+'outlineColor:'+outlineColor+'color.match:'+(''+color.match:'+.match(/rgb[(])((\d+)[,]\s*(\d+[,]\s*(\d+)/);
var test=document.getElementById('test');
test.style.backgroundColor=''+大纲颜色;
}
函数readPropertyVal(){
//var inp=document.getElementById('hello');
//var inp=document.getElementById('btn');
var inp=document.getElementById('inp');
var color=getComputedStyle(inp,null).getPropertyValue('outline-color');
警报(“颜色:”+颜色);
var test=document.getElementById('test');
test.style.backgroundColor=''+颜色;
}
不幸的是,这种边框在Chrome和Safari中是不同的(也许在其他支持或将支持它的浏览器中也是如此)。因此,如果我能准确模拟每个用户都习惯的那种边框,那就太完美了。感谢您提出使用JavaScript来查找边框颜色的想法。我用它解决了我的问题。有趣的是,CSS中提供了一些特定于操作系统的颜色,尽管很难想到应用程序。@Danylo,我能想到一些人们可能想模仿特定于平台的警报的原因……也许这也是一个好主意,让web应用程序看起来更像家里的应用程序?您使用了什么JS来查找特定于浏览器的颜色?我使用了类似以下代码:[var textarea=document.createElement('textarea');document.body.appendChild(textarea);textarea.focus();var color=window.getComputedStyle(textarea,null)。getPropertyValue('outline-color');]我在下面的回答中更详细地描述了这种方法。-webkit聚焦环颜色正是所需要的。不幸的是,像-webkit焦点环宽度和-webkit焦点环偏移量这样的常量似乎丢失了。正如您所看到的,Sarari呈现“outline:2px auto-webkit焦点环颜色”的方式非常不同:(上面的是原始5px宽度-2px偏移量,下面是2px宽度)。小心,窗口。getComputedStyle
在IE中不起作用。。。它为dom节点提供了一个currentStyle
属性。IE9实现了getComputedStyle,以前的版本不绘制大纲。因此,“if(window.getComputedStyle)”检查足以避免此问题。
<!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>