Facebook 样式状态输入边框答案

【问题标题】：Facebook style status input borderFacebook 样式状态输入边框
【发布时间】：2011-08-12 01:20:07
【问题描述】：

我尝试使用 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 边框？

【问题讨论】：

标签： html css facebook input

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

虽然之前有人问过类似的问题...

【讨论】：

偶然发现：css3shapes.com - 很棒的收藏/关于如何获得包括语音气泡在内的各种形状的想法：)

【解决方案3】：

我做了一个模仿 facebook 状态框的小提琴...

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！

关于三角形...

如果您对仅使用 CSS 的替代方法感兴趣，我最近问了一个关于小三角形的问题！问题来了……

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

...这里是答案：

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

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

【讨论】：

【解决方案4】：

感谢您的有用提示，

我终于设法用四线解决了它：

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

问候

克里斯

【讨论】：