Как создать текстовое поле со стрелкой статуса Facebook?

Моя кросс-браузерная версия текстового поля в стиле Facebook только для CSS:

КАК

Я использовал :before во внутреннем контейнере div (со свернутыми границами 7px, тремя прозрачными, одним белым), чтобы создать треугольник, где границы пересекаются, затем я поместил его прямо над текстовым полем с абсолютным позиционированием (переопределив границу текстового поля на « прикрепите к нему треугольник).

В соответствии с этим вопросом следует использовать rgba вместо transparent для того, чтобы Firefox не ставил нежелательную рамку;

Затем, для окрашивания границы в кросс-браузерном режиме, я использовал :after, чтобы поместить идентичный треугольник того же размера, с цветом, похожим(*) на границы текстового поля, всего на 1 пиксель выше ( в верхнем положении), чем белый треугольник.

На этом этапе я использовал свойство z-index, чтобы поместить серый треугольник ПОД белым треугольником, чтобы был виден только 1 пиксель его «тела» (нижняя граница).

Это создало серую границу для стрелки.

(*) Я выбрал цвет немного темнее, чем цвет границ текстового поля, из-за эффекта «осветления», создаваемого смешиванием двух треугольников. При использовании #888 вместо #bbb результат будет приемлемым и более похожим на исходный цвет, чем при использовании самого исходного цвета.

Вот закомментированный код и демо:

ДЕМО

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 */
}

Надеюсь, это поможет...

довольно много возможностей:

Я бы предпочел получить треугольное изображение, соответствующее вашим потребностям, а затем поместить его через css над полем ввода.

Вы можете исправить это, указав в поле ввода класс треугольника_ввода, установив его относительным. И придание изображению треугольника абсолютного атрибута. Измените смещение, пока оно не окажется в нужном вам месте.

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="" />

Конечно, вам придется настроить смещения треугольника в соответствии с вашими потребностями.