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?
views:
44answers:
3
+1
A:
Edited in response to OP's comment:
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.
David Thomas
2010-09-26 17:20:21
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.
Danylo Mysak
2010-09-26 17:27:00
Thank you for the idea to use JavaScript to find the color of the border. I used it and solved my problem.And that’s quite interesting that some OS-specific colors are available in CSS although it’s hard to think of application.
Danylo Mysak
2010-09-27 07:56:56
@Danylo, I can think of a few reasons people might want to imitate platform-specific alerts...possibly it'd be a good idea for web-apps too, to make them look more at-home? What JS did you use to find the browser-specific colours?
David Thomas
2010-09-27 09:28:43
I used the code similar to this: **[var textarea=document.createElement('textarea');document.body.appendChild(textarea);textarea.focus();var color=window.getComputedStyle(textarea,null).getPropertyValue('outline-color');]**And I described the approach in more details in my answer below.
Danylo Mysak
2010-09-27 10:01:41
@Danylo, thanks! =)
David Thomas
2010-09-27 10:35:52
+1
A:
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'.
Danylo Mysak
2010-09-27 07:52:36
Watch out, `window.getComputedStyle` doesn't work in IE... It gives dom nodes a `currentStyle` property instead. http://msdn.microsoft.com/en-us/library/ms535231.aspx
no
2010-09-29 01:20:47
IE9 implements getComputedStyle and previous versions don’t draw outline. So 'if(window.getComputedStyle)' check is sufficient to avoid this problem.
Danylo Mysak
2010-09-30 17:02:15
+1
A:
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.
no
2010-09-27 08:10:38
-webkit-focus-ring-color is just what was needed. Unfortunately the constants like -webkit-focus-ring-width and -webkit-focus-ring-offset seem to be missing.
Danylo Mysak
2010-09-27 10:18:39
As you can see, Sarari renders 'outline: 2px auto -webkit-focus-ring-color' pretty differently: http://matholymp.org.ua/_temp/outline.png (the upper one is original 5px width -2px offset, the lower is 2px width).
Danylo Mysak
2010-09-27 10:30:14