Wie simuliert man den Chrome/Safari-Rahmen um aktive Eingabe oder Textarea auf anderen Elementen wie divs oder iframes?

Question

Ich verwendete einfaches Textarea-Element und ersetzte es dann durch iframe mit designMode = 'on', um dem Benutzer die Möglichkeit zu geben, Text zu markieren und kursiv zu machen. Aber ich möchte immer noch, dass ein iframe wie textarea aussieht, also brauche ich einen Rahmen, ähnlich dem, der in Chrome und Safari erscheint, wenn der Textbereich aktiv ist. Wie kann ich einen solchen Effekt erzielen?

Answer 1

Ich löste mein Problem auf folgende Weise.

Wenn ich Iframe zum ersten Mal hervorheben muss, erzeuge ich ein Textfeld mit negativer "linker" Koordinate (damit es für den Benutzer unsichtbar ist), gebe ihm einen Fokus und erhalte seine CSS-Eigenschaften über window.getComputedStyle. Dann wende ich vier dieser Eigenschaften auf den fokussierten iFrame an: 'Umrissfarbe', 'Umriss-Stil', 'Umriss-Breite' und 'Umriss-Versatz'.

Aus irgendeinem Grund gibt Ihnen Safari 5 keinen korrekten Wert für 'Outline-Offset'. Also habe ich es vorläufig auf -2px festgeschrieben.

Answer 2

Sie können den :focus psuedo-Selektor und die outline Eigenschaft:

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

Dies wird einen gelben Umriss auf das Element hinzufügen, ich bin nicht sicher, welche Farbe Chrome und Safari verwendet, sondern fügen Sie einfach Ihre bevorzugte Farbe zu Geschmack.

---

als Antwort auf OP Kommentar Editiert:

Nun, leider ist diese Art von Grenze unterscheidet sich in Chrome und Safari (und in anderen Browsern vielleicht, die sie unterstützen oder unterstützt). Es wäre also perfekt, wenn ich genau diese Art von Grenze simulieren könnte, an die jeder einzelne Benutzer gewöhnt ist.

Es gibt einige Plattform/OS-spezifische Farben in CSS zur Verfügung (obwohl Browser Implementierung offensichtlich variiert):

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

Quelle: http://blogs.sitepoint.com/2009/08/11/css-system-styles/

ich nicht bewusst bin, obwohl, beliebiger browserspezifischer Optionen, die angewendet werden könnten. Sie könnten vielleicht Java Script verwenden, um die Farbe eines bestimmten Browsers zu finden, aber ich bin nicht überzeugt, dass das funktionieren würde, da die Pseudo-Selektoren nur schwer zugänglich sind.

Answer 3

Sie können die abgerundete Kontur in webkit wie diese:

outline: 2px auto red; 

Beachten Sie, dass die Breite der Kontur die angegebene Breite nicht gehorchen, und die Farbe ist auch nicht ganz genau.

Um den normalen Fokus Farbe zu verwenden, können Sie dies tun:

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

In moz, Sie -moz-outline-radius (funktioniert genauso wie border-radius) verwenden können, eine abgerundete Kontur zu erhalten.

Answer 4

Ich fand einen Artikel, der Browser spezifische Farben for FireFox und for Safari/Chrome erwähnt.

Ich habe versucht, die Fokusringfarbe in Javascript zu lesen, also könnte ich es weicher machen und es innerhalb unserer UI verwenden, aber ich gab auf. Hier war der Test-Code, mit dem ich spielte:

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