Граница ввода статуса в стиле 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Плагин, позволяющий автоматически изменять размер текстовой области .

. Facebook фактически использует элемент <textarea>, и способ, которым они заботятся о границе, прост.

"Что у тебя на уме?"текст находится внутри элемента <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/

Подобный вопрос уже задавался ранее ...

Answer 3

Граница вокруг текстовой области фактически находится вокруг родительского элемента div (.uiTypeahead, .wrap) внутри формы. Похоже, что текстовая область не имеет границ.

Что касается треугольника, то это просто фон CSS внутри li (статус элементов, фото, видео, ссылки и т. Д. Являются списком). Треугольник это элемент: <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;
}

Привет

Chris