How to create the Facebook Status arrowed textbox?

问题:

How can I get a curved TextBox like the Facebook Status TextBox with html and css only?

Can Anybody illustrate me how to do that ??

回答1:

My Cross-Browser, CSS-only version of the Facebook-style textbox:

---

HOW TO

I've used :before on the inner container div (with 7px collapsed borders, three transparents, one white) to create a triangle where the borders intersect themselves, then i placed it just over the textbox with absolute positioning (overriding the textbox's border to "attach" the triangle to it).

According to this question, rgba should be used instead of transparent in order to prevent Firefox to put an unwanted border;

Then, for coloring the border in a cross-browser way, i used :after to place an identical triangle, with the same size, with a color similar(*) to the textbox's borders, just 1px higher (in top position) than the white triangle.

At this point, i've used z-index property to place the gray triangle UNDER the white triangle, so that only 1px of its "body" (the bottom border) would have been visible.

This created the gray border to the arrow.

(*) I've chosen a color a bit darker than the textbox's borders one, because of the "brightening" effect generated by mixing the two triangles. With #888 instead of #bbb, the result is acceptable and more similar to the original color than using the original color itself.

Here is the commented code and the demo:

---

DEMO

http://jsfiddle.net/syTDv/

---

HTML

<div id="fbContainer">
   <div class="facebookTriangle">  
      <input type="text" id="facebookTextbox" value="some text"/>
   </div>
</div>

CSS

body {
    padding: 30px;
}


/* With this container you can put the textbox anywhere on the page,
 without disturbing the triangles's absolute positioning */
#fbContainer{
  position: relative;
}


/* some adjustments to make the textbox more pretty */
#facebookTextbox{   
   border: 1px solid #bbb !important;
   padding: 5px;
   color: gray;
   font-size: 1em;
   width: 200px;
}


/* block element needed to apply :before and :after */
.facebookTriangle{
  height: 30px;
  padding-top: 10px;
}


/* white triangle */
/* collapsing borders (because of the empty content) 
   creates four triangles, three transparents and one coloured, 
   the bottom one */    
.facebookTriangle:before {
  content: '';
  border-style: solid;
  border-width: 7px;
  border-color: rgba(255,255,255,0) rgba(255,255,255,0) 
                white rgba(255,255,255,0);
  top: -3px;
  position: absolute;
  left: 7px;
  z-index: 2; /* stay in front */
}


/* gray triangle */
/* used as border for white triangle */
.facebookTriangle:after {
  content: '';
  border-style: solid;
  border-width: 7px;
  border-color: rgba(255,255,255,0) rgba(255,255,255,0) 
                #888 rgba(255,255,255,0);  
  top: -4px;
  position: absolute;
  left: 7px;
  z-index: 1; /* stay behind */
}

Hope that helps...

回答2:

quite a few possibilities:

My prefered one would be to get an triangle image that fit's your needs then put it via css above the input field.

You could fix it giving the input field the class triangled_input, setting it to relative. And giving the triangle image the attribute absolute. Changing the offset till it's at the place you wanted.

e.g.

<style>
.triangled_input{
position: relative;
}

.triangle{
position: absolute;
top: -10px;
left: 10px;
}
</style>

<input class="triangled_input" />
<img src="your_triangle.gif" class="triangle" alt="" />

Of course you'll have to adjust the offsets for the triangle to fit your needs.