Facebook风格状态输入边框

Question

我试图用Firebug解决这个问题，但没有机会。 Facebook状态输入边框如何围绕自动调整输入？特别是，我对加入边境的小三角感兴趣。使用Firebug，我设法找到了三角形本身，它以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状态框的小提琴......

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

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

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

“你在想什么？” text位于<textarea>元素内，其周围的边框是由于多个<div>元素包装器（超过上面显示的2个）。另外，正如你所指出的那样，“你心中有什么？”之上的小箭头。是一个.gif图像，但有一些方法可以只使用CSS！

关于三角形...

如果你对使用CSS的替代方法感兴趣，我最近问了一个关于小三角的问题！这是问题......

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

......以下是答案：

• answer 1
• answer 2
• answer 3
• answer 4（这个真的很酷!!!）

我希望这会有所帮助 赫里斯托斯

Answer 2

以下是使用CSS的方法：http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/

之前已经问过类似的问题......

Answer 3

textarea周围的边框实际上是在表单中的父div（.uiTypeahead，.wrap）周围。看起来实际的textarea没有边框。

至于三角形，它只是li里面的css背景（项目状态，照片，视频，链接等是一个列表）。三角形是这个元素：<i class="nub"></i>。然后将其定位在绝对位于列表底部的下方。

Answer 4

感谢您提供有用的提示，

我终于成功解决了四个问题：

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

问候

克里斯