Border for status input like on Facebook

I tried to investigate with Firebug, but struggled to find a solution. How does Facebook wrap the border around the autosize input in the status section? I am particularly curious about the small triangle attached to the border. While using Firebug, I located the triangle itself, presented as a GIF image:

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

Despite finding the triangle, I was unable to determine how it is positioned above the input and whether the border is created using a background image or defined within CSS.

htmlcssfacebookinput

Answer №1

I created a fiddle that imitates the facebook status box...

http://jsfiddle.net/UniqueCoder123/aBcDe/6/

I incorporated some additional features into the demo, including discovering an interesting jQuery plugin for textarea auto-resizing.

Facebook employs a <textarea> element and handles the border in a straightforward manner.

The prompt "What's on your mind?" is located within the <textarea> element with surrounding borders created by multiple <div> elements (more than just the 2 displayed above). Additionally, as mentioned, the small arrow above "What's on your mind?" is a .gif image, but it can also be achieved using CSS alone!

About the triangle...

If you're curious about alternative methods of achieving this with only CSS, I recently posed a question regarding the little triangle! Here's the link...

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

... and here are the suggested solutions:

  • solution 1
  • solution 2
  • solution 3
  • solution 4 (this one is REALLY clever!!!)

I trust this information is beneficial.
Chris

Answer №2

If you're looking to achieve this using just CSS, here's a great resource that shows you how:

This question has come up before, so you might find some additional insights in past discussions.

Answer №3

The border surrounding the textarea is actually applied to the parent divs (.uiTypeahead, .wrap) within the form. It appears that the actual textarea itself does not have a border.

Regarding the triangle, it is simply a CSS background element located inside the li (the items representing status, photo, video, link, etc in a list). The triangle can be represented by this code: <i class="nub"></i>. This element is then positioned absolutely to align at the bottom of the list which contains the form just beneath it.

Answer №4

Appreciate the helpful hints,

I was able to conquer it with just a few lines of code:

#type_indicator { /* img#type_indicator refers to the triangle image tag, located before the input field in the HTML code */
    position:absolute;
    left:100px;
}

Best regards

Christopher

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the textbox remains valid when the reset button is clicked in Bootstrap

After implementing the code for bootstrap textbox and textarea, I encountered an issue when using the reset button. When entering an invalid shop name followed by a valid address and clicking on the Reset button, it resets the form. However, if I then only ...

javascriptjqueryhtmlcsstwitter-bootstrap

Displaying an element outside with reduced opacity using fabric js and controls placed above overlay

The property controlsAboveOverlay in Fabric.js is a boolean that, when set to true, will display the controls (borders, corners, etc.) of an object above the overlay image. The overlay image is an image that can be placed on top of the canvas. Currently, ...

javascripthtmlcssfabricjs

The parent DIV has a height of 0px, yet the child element is still visible

As I explored options for creating a navbar drop down menu with an accordion effect, I stumbled upon this informative YouTube video. The tutorial demonstrated the use of a custom component and manipulation of the max-height property of the card-content ele ...

htmlcssangularionic-frameworkionic3

Enhancing File Uploads with Vuetify

For my Vue.js project, I am attempting to upload a file using Vuetify and then store that uploaded file in my data object. This is the HTML code: <input id="file-upload" type="file" @change="onFileChange"> Within my methods section, I have the fol ...

htmlvue.jsfile-uploadvuetify.js

Can someone explain the functionality of the CSS Selector > * when used inside a Vue.js component?

While exploring the Vuestic admin dashboard tool, I noticed a glitch in the UI where the donut chart appeared larger than its container. I tried to troubleshoot and fix it for submission as a PR, but I encountered an unfamiliar CSS selector > * while de ...

cssvue.jsvue-component

Is it possible to run quirks mode in one frame while running standards mode in another?

Back in the IE6 days, I developed an old application that relies on frames instead of iframes and runs in quirks mode. Now, I'm wondering if it's possible to have one frame remain in quirks mode while another operates in standards mode when using ...

htmlcssquirks-mode

Is there a way to transfer a value set from one tpl file to another tpl file in cscart using smarty template engine?

I am trying to retrieve the value of a variable set using an input tag from one tpl file. Here is the input tag in A.tpl file: <input type="checkbox" class="checkbox" name="payment_data[processor_params][enable_addbillcard]" id="optional_enable_addbil ...

phphtmlsmartycs-cart

Having trouble with the auto width CSS for the center section of my webpage

I am facing an issue with assigning widths to my divisions using the CSS calc property. Despite setting the width for the first and last divisions, I am unable to allocate any width to the middle division. HTML: <div style="width:400px;"> <div ...

htmlcss

Choosing elements in HTML using jQuery from an Ajax GET response

As a programming student, I am currently working on developing a basic website using HTML, JavaScript, and jQuery for the front-end, while utilizing node.js and Express frameworks for the back-end. In my project, I have used Ajax to retrieve data and then ...

javascriptjqueryhtmlajaxexpress

ever-evolving background-image with dynamic CSS styling

Being new to both PHP and Javascript, please excuse any mistakes in my explanation. I have information stored in a PHP array that I bring to my index page using the function below (located in a separate file called articles.php that is included in my index ...

phpjavascripthtmlcssbackground-image

What is the best way to determine if this statement is redundant or not?

I am attempting to generate a file with PHP that includes a substantial amount of HTML content and MySQL queries. The issue arises on line 3, indicated by the downward-facing arrow. The primary error identified is an excess of single inverted commas causi ...

phphtmlmysql

Angular 4 incorporating a customized Bootstrap 4 accordion menu for seamless navigation

I am trying to implement a nested menu using a JSON object in Angular 4. Below is the code I have written. <div id="panel-group"> <div class="panel panel-default" *ngFor="let mainItem of objectKeys(my_menu); let i = index"> <div class ...

htmlangularbootstrap-4angular5angular2-routing

"Enhance User Experience: Use CSS to highlight text selection based on

As a beginner in the world of css and html, I am eager to create a webpage that showcases a list of names with the ability to select one or multiple names. Instead of simply checking a box on the side, I would love for the background of the selected text t ...

jqueryhtmlcss

"An issue arises with jqPlot axes and legend when exporting images, as they are not rendering

After successfully rendering my jqPlot, I encountered an issue when exporting it as an image. The axes text and legend labels aren't displaying correctly in the exported image - the text seems to be shifting. Here's a comparison of the actual plo ...

jquerycssimagejqplot

Remove a row from a table using the hyperlink reference

I am facing an issue where I want to delete a row in the table along with the corresponding database entry by clicking on a href link, but it doesn't work as expected: <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"& ...

phpjavascripthtmlsymfony

There are no imports in index.js and there is no systemjs configuration set up

After creating a fresh Angular project using ng new some-name, I noticed that the generated index.html file does not include any <script> tags and there is no SystemJS configuration either. Is this the expected behavior? I was anticipating the CLI ...

htmlangulartypescriptangular-cli

Conceal the div using a sliding left animation

After researching extensively, I have been unable to find a solution to my problem. In order to better illustrate my issue, here is the code for reference: jsfiddle I am looking to create a sliding effect for a calc div where it moves to the left, simila ...

jquerycss

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Currently, I am working with an Angular grid (ag-grid) that dynamically creates div elements in the DOM to display data as the user scrolls or views different sections. As part of my testing process using Selenium WebDriver, I need to retrieve this data fr ...

javascriptcssangularjsseleniumag-grid

Angular ensures that the fixed display element matches the size of its neighboring sibling

I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: The issue arises when setting the div's width as a percentage of the ...

htmlcssangularjstypescript

Changing the color of a div element dynamically with JavaScript

Is there a way to improve the code below so that the background color of this div box changes instantly when clicked, without needing to click twice? function updateBackgroundColor(platz_id) { if(document.getElementById(platz_id).style.backgroundCol ...

javascripthtmlcss