How to simulate Chrome/Safari border around active input or textarea on other elements such as divs or iframes?

Question

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 an effect?

Answer 1

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.

Answer 2

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.

Answer 3

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>

Answer 4

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'.