How to simulate Chrome/Safari border around active input or textarea on other elements such as divs or iframes?
I was using simple textarea element and then replaced it with iframe with designMode='on' to give user the possibility to mark some text and make it italic. But I still want an iframe to look like textarea, so I need a border around it similar to that which appears in Chrome and Safari when textarea is active. How can I achieve such a开发者_运维百科n effect?
You can get the rounded outline in webkit like this:
outline: 2px auto red;
Notice that the width of the outline will not obey the specified width, and the color isn't completely accurate either.
To use the normal focus color, you can do this:
outline: 2px auto -webkit-focus-ring-color;
In moz, you can use -moz-outline-radius
(works just like border-radius) to get a rounded outline.
You can use the :focus
psuedo-selector and the outline
property:
`.elementClass:focus {
outline: 1px solid #ffa;
}
This will add a yellow outline to the element, I'm not sure what colour Chrome and Safari uses, but just add your preferred colour-to-taste.
Edited in response to OP's comment:
Well, unfortunately this kind of border is different in Chrome and Safari (and, perhaps, in other browsers which support or will support it). So it would be perfect if I could simulate exactly that kind of border that each individual user is used to.
There are some platform/OS-specific colours available in CSS (though browser implementation, obviously, varies):
+----------------------+------------------------------------------------------------------+
| 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 |
+----------------------+------------------------------------------------------------------+
Source: http://blogs.sitepoint.com/2009/08/11/css-system-styles/
I'm not aware, though, of any browser-specific options that could be applied. You could, perhaps, useJavaScript to find the colour from a particular browser, but I'm not convinced that would work, due to the difficulty of accessing the pseudo-selectors.
I found an article that mentions browser specific colours for FireFox and for Safari/Chrome.
I was trying to read the focus ring colour in javascript, so I could soften it and use it within our UI, but I gave up. Here was the test code I was playing with:
<!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>
I solved my problem in a following way.
When I need to highlight iframe for the first time I’m creating textarea with negative 'left' coordinate (so that it’s invisible to user), give it a focus and get its CSS properties via window.getComputedStyle. Then I’m applying four of these properties to focused iframe: 'outline-color', 'outline-style', 'outline-width' and 'outline-offset'.
For some reason Safari 5 wouldn’t give you correct value for 'outline-offset'. So for the time being I hardcoded it to be '-2px'.
精彩评论