問題描述

我怎樣才能得到一個彎曲的文本框，比如 Facebook 狀態文本框，只有 html 和 css?

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

誰能告訴我怎么做??

推薦答案

我的跨瀏覽器，Facebook 樣式文本框的純 CSS 版本:

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

如何

我在內部容器 div 上使用了 :before(具有 7px 折疊邊框，三個透明，一個白色)創建一個三角形，其中邊框相交，然后我將它放在具有絕對定位的文本框(覆蓋文本框的邊框以將三角形附加"到它).

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).

根據這個問題，rgba應該使用 代替 transparent 以防止 Firefox 放置不需要的邊框；

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

然后，為了以跨瀏覽器的方式為邊框著色，我使用 :after 放置一個相同的三角形，大小相同，顏色相似(*) 到文本框的邊框，僅比白色三角形高 1px(在頂部位置).

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.

此時，我已使用 z-index 屬性將灰色三角形置于白色三角形下方，以便其主體"(底部邊框)只有 1px 可見.

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.

(*) 我選擇的顏色比文本框的邊框顏色深一點，因為混合兩個三角形會產生增亮"效果.使用#888 而不是#bbb，結果是可以接受的，并且比使用原始顏色本身更類似于原始顏色.

(*) 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:

演示

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

這篇關于如何創建 Facebook 狀態箭頭文本框?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！