Facebook style status input border

Question

I tried to figure it out using Firebug, but no chance. How is the Facebook status input border wrapped round the autosize input? Particularly, I am interested in the small triangle joined into the border. Using Firebug, I managed to find the triangle itself, which is provided in the form of 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 couldn't figure out how it is placed above the input and how the border is added, in the form of a background image or defined as a CSS border?

Answer 1

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

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

I added some functionality to the example, in particular, I found a cool jQuery plugin that allows for textarea auto-resizing.

Facebook actually uses a <textarea> element and the way they take care of the border is simple.

The "What's on your mind?" text is inside the <textarea> element and the border around it is due to several <div> element wrappers (more than the 2 I've shown above). Also, as you pointed out, the little arrow on top of the "What's on your mind?" is a .gif image, but there are ways to do this using only CSS!

Regarding the triangle...

If you're interested in alternative ways to do this using only CSS, I asked a question recently about the little triangle! Here's the question...

How can I create a "tooltip tail" using pure CSS?

... and here are the answers:

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

I hope this helps.
Hristo

Answer 2

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 has been asked before though...

Answer 3

The border around the textarea is actually around parent div's (.uiTypeahead, .wrap) within the form. Looks like the actual textarea has no border.

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