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/

我在示例中添加了一些功能,特别是,我找到了一个很酷的jQuery插件,允许textarea自动调整大小.

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

"你有什么想法？" text在<textarea>元素内部,并且它周围的边框是由于几个<div>元素包装器(超过我上面显示的2个).另外,正如你所指出的那样,"你心中有什么？"之上的小箭头.是一个.gif图像,但有办法只用CSS做到这一点!

关于三角形......

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

如何使用纯CSS创建"工具提示尾部"？

......以下是答案:

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

我希望这有帮助.
斯托伊奇

Answer 2

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

不过之前也有人问过类似的问题...