Facebook style status entry border

Question

I tried to figure it out with Firebug, but no chance. How does the Facebook status entry border wrap around autostart input? In particular, I am interested in a small triangle connected to the border. Using Firebug, I managed to find the triangle itself, which is represented as a GIF image:

.uiComposerAttachment, .nub { background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zf/r/PfBgtiydy5U.gif) no-repeat center top; height: 7px; width: 11px position: absolute; left: 2px; top: 18px; } 

But I could not understand how it is placed above the input and how is the border added as a background image or is it defined as a CSS border?

Answer 1

Here's how you can do it using only CSS: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/

A similar question was asked before, though ...

Answer 2

I made a fiddle that mimics the facebook status window ...

http://jsfiddle.net/UnsungHero97/mFuD4/5/

I added some functionality, for example, in particular, I found a cool jQuery plugin that allows you to automatically resize text .

Facebook actually uses the <textarea> element, and the way they care about the border is simple.

"What do you think?" the text is inside the <textarea> element, and the border around it is connected to several wrappers of the <div> elements (more than what I showed 2). Also, as you pointed out, a small arrow on top of "What do you think?" it's a .gif image, but there are ways to do it using only CSS!

Regarding the triangle ...

If you are interested in alternative ways to do this using only CSS, I recently asked a question about a small triangle! That is the question ...

How to create tooltip tail using pure CSS?

... and here are the answers:

• answer 1
• answer 2
• answer 3
• reply 4 (this is REALLY cool !!!)

Hope this helps. Christo

Answer 3

The border around the text box is actually around the parent div (.uiTypeahead, .wrap) inside the form. It seems that the actual textarea has no border.

As for the triangle, it's just a css background inside li (element status, photo, video, link, etc. is a list). The triangle is this element: <i class="nub"></i> . Then it is placed as absolute to sit at the bottom of the list, which has the form just below.

Answer 4

Thanks for the helpful hints,

I managed to solve it in a four-line layer:

 #type_indicator { /* img#type_indicator is the triangle image tag, followed by the input field in HTML code */ position:absolute; left:100px; } 

Hi

Chris