Làm cách nào để mô phỏng đường viền Chrome/Safari xung quanh đầu vào hoặc văn bản hoạt động trên các phần tử khác như div hoặc iframe?

Question

Tôi đã sử dụng phần tử textarea đơn giản và sau đó thay thế nó bằng iframe với designMode = 'on' để cho người dùng khả năng đánh dấu một số văn bản và làm cho nó nghiêng. Nhưng tôi vẫn muốn một khung nội tuyến trông giống như textarea, vì vậy tôi cần một đường viền xung quanh nó giống với đường viền xuất hiện trong Chrome và Safari khi textarea đang hoạt động. Làm thế nào tôi có thể đạt được một hiệu ứng như vậy?

Answer 1

Tôi đã giải quyết được sự cố của mình theo cách sau.

Khi tôi cần đánh dấu iframe lần đầu tiên tôi đang tạo vùng văn bản có tọa độ 'trái' phủ định (để ẩn với người dùng), hãy tập trung vào và lấy thuộc tính CSS của nó qua window.getComputedStyle. Sau đó, tôi áp dụng bốn thuộc tính này cho iframe tập trung: 'outline-color', 'outline-style', 'outline-width' và 'outline-offset'.

Vì lý do nào đó Safari 5 sẽ không cung cấp cho bạn giá trị chính xác cho 'phác thảo bù trừ'. Vì vậy, trong thời gian này tôi đã mã hóa nó thành '-2px'.

Answer 2

Bạn có thể sử dụng :focus psuedo-selector và outline tài sản:

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

này sẽ thêm một đường viền màu vàng để nguyên tố này, tôi không chắc chắn những gì màu Chrome và Safari sử dụng, nhưng chỉ cần thêm của bạn ưa thích màu sắc để nếm.

---

Sửa để phản ứng lại bình luận OP của:

Vâng, không may loại này biên giới là khác nhau trong Chrome và Safari (và, có lẽ, trong các trình duyệt khác có hỗ trợ hoặc sẽ hỗ trợ nó). Vì vậy, nó sẽ là hoàn hảo nếu tôi có thể mô phỏng chính xác loại biên giới mà mỗi người dùng cá nhân được sử dụng để.

Có một số màu sắc nền tảng/hệ điều hành cụ thể có sẵn trong CSS (mặc dù thực hiện trình duyệt, rõ ràng, khác nhau):

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

Nguồn: http://blogs.sitepoint.com/2009/08/11/css-system-styles/

Tôi không biết, tuy nhiên, của bất kỳ tùy chọn dành riêng cho trình duyệt nào có thể được áp dụng. Bạn có thể, có lẽ, sử dụngJavaScript để tìm màu từ một trình duyệt cụ thể, nhưng tôi không tin rằng nó sẽ hoạt động, do khó khăn trong việc truy cập các bộ chọn giả.

Answer 3

Bạn có thể lấy đề cương tròn trong webkit như thế này:

outline: 2px auto red; 

Chú ý rằng độ rộng của đề cương sẽ không tuân theo chiều rộng chỉ định, và màu sắc không phải là hoàn toàn chính xác một trong hai.

Để sử dụng màu sắc tập trung bình thường, bạn có thể làm điều này:

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

Trong MOZ, bạn có thể sử dụng -moz-outline-radius (hoạt động giống như border-radius) để có được một phác thảo tròn.

Answer 4

Tôi tìm thấy một bài viết đề cập đến các màu cụ thể của trình duyệt for FireFox và for Safari/Chrome.

Tôi đã cố gắng đọc màu vòng lấy nét trong javascript, vì vậy tôi có thể làm mềm nó và sử dụng nó trong giao diện người dùng của chúng tôi, nhưng tôi đã từ bỏ. Đây là mã thử nghiệm tôi đã chơi với:

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