Как смоделировать границу Chrome / Safari вокруг активного ввода или текстовой области на других элементах, таких как div или iframes?

Question

Я использовал простой элемент textarea и затем заменил его на iframe с designMode = 'on', чтобы дать пользователю возможность пометить некоторый текст и сделать его курсивом. Но я все еще хочу, чтобы iframe выглядел как текстовое поле, поэтому мне нужна рамка вокруг него, похожая на ту, которая появляется в Chrome и Safari, когда текстовое поле активно. Как мне добиться такого эффекта?

Answer 1

Вы можете получить закругленный контур в webkit следующим образом:

outline: 2px auto red;

Обратите внимание, что ширина контура не будет соответствовать указанной ширине, и цвет также не будет полностью точным.

Чтобы использовать обычный цвет фокуса, вы можете сделать это:

outline: 2px auto -webkit-focus-ring-color;

В moz вы можете использовать -moz-outline-radius (работает так же, как border-radius), чтобы получить закругленный контур.

Answer 2

Вы можете использовать псевдо-селектор :focus и свойство outline:

`.elementClass:focus {
    outline: 1px solid #ffa;
}

Это добавит желтый контур к элементу, я не уверен, какой цвет использует Chrome и Safari, но просто добавлю ваш предпочтительный цвет по вкусу.

<ч /> Отредактировано в ответ на комментарий ОП:

Ну, к сожалению, этот вид границ отличается в 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  |
+----------------------+------------------------------------------------------------------+

Источник: http://blogs.sitepoint.com/2009/08/11/css-system-styles/

Однако я не знаю ни о каких специфичных для браузера параметрах, которые могли бы быть применены. Возможно, вы могли бы использовать JavaScript, чтобы найти цвет из определенного браузера, но я не уверен, что это сработает из-за сложности доступа к псевдо-селекторам.

Answer 3

Я нашел статью, в которой упоминаются определенные цвета браузера для FireFox и для Safari / Chrome .

Я пытался прочитать цвет кольца фокуса в JavaScript,так что я мог смягчить его и использовать в нашем интерфейсе, но я сдался.Вот тестовый код, с которым я играл:

<!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

Я решил свою проблему следующим образом.

Когда мне нужно впервые выделить iframe, я создаю текстовую область с отрицательной «левой» координатой (чтобы она была невидима для пользователя), дайте ейфокус и получить его свойства CSS через window.getComputedStyle.Затем я применяю четыре из этих свойств к сфокусированному iframe: «контур-цвет», «контур-стиль», «контур-ширина» и «контур-смещение».t дать вам правильное значение для 'outline-offset'.Поэтому на данный момент я жестко закодировал его как «-2px».