html - Facebook 风格的状态输入框

Question

我试图用 Firebug 解决这个问题，但没有机会。 Facebook 状态输入边框如何环绕自动调整大小输入？特别是，我对加入边界的小三 Angular 形感兴趣。使用 Firebug，我设法找到了三 Angular 形本身，它以 GIF 图像的形式提供:

.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;
}

但我无法弄清楚它是如何放置在输入上方以及如何添加边框的，以背景图像的形式还是定义为 CSS 边框？

Answer 1

我做了一个模仿 facebook 状态框的 fiddle ......

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

我在示例中添加了一些功能，特别是 I found a cool jQuery plugin that allows for textarea auto-resizing .

Facebook 实际上使用了一个 <textarea>元素和他们处理边界的方式很简单。

“你在想什么？”文本在 <textarea> 内元素及其周围的边框是由于几个 <div>元素包装器(超过我上面显示的 2 个)。另外，正如您所指出的，“您在想什么？”上方的小箭头。是 .gif图片，但有一些方法可以仅使用 CSS 来完成此操作!

关于三 Angular 形...

如果您对仅使用 CSS 的替代方法感兴趣，我最近问了一个关于小三 Angular 形的问题!这是问题...

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

...这里是答案:

• answer 1
• answer 2
• answer 3
• answer 4 (这个真的很酷!!!)

希望对您有所帮助。
赫里斯托