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

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.

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>