文本框设计与Silverlight中的文本框相同

Question

我需要制作一个文本框，其设计与我们在silverlight中的设计相同：

现在，问题是文本框右上角的小三角形。我无法将其放在文本框上。我的文本框看起来像这样：

HTML：

<div id='wrap'>
  <input type="text" id="validateInput"/>
  <span>
    <img src="http://snag.gy/C3CDl.jpg" class="triangleimg">
  </span>
</div>

CSS：

#validateInput
{
  background-color: #FFFFE0;
  border: 1px solid red;
  height:20px;
}

.triangleimg
{
  vertical-align:top;
  position:absolute;
}

这是迄今为止我尝试过的代码的working demo。任何帮助将不胜感激。

Answer 1

将display: inline-block;和position: relative;用于父div。
和position: absolute;到子女。

#validateInput
{
  background-color: #FFFFE0;
  border: 1px solid red;
  height:20px;
}

.triangleimg
{
  vertical-align:top;
  
}
div {
    display: inline-block;
    position: relative;
}

span {
    position: absolute;
    right: -3px;
    top: -1px;
}

<div id='wrap'>
  <input type="text" id="validateInput"/>
  <span>
    <img src="http://snag.gy/C3CDl.jpg" class="triangleimg">
  </span>
</div>

Working Fiddle

Answer 2

如果可以更改html结构，也可以使用css作为箭头

＆＃13;

＆＃13;

#validateInput {
  background-color: #FFFFE0;
  border: 1px solid red;
  height: 20px;
}
#wrap span {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
#wrap span:after {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 0;
  height: 0;
  border-width: 5px;
  border-color: red;
  border-style: solid;
  transform: rotate(45deg);
  box-shadow: 0px 0px 0px 1px #FFFFE0;
}

＆＃13;

<div id='wrap'>
  <span><input type="text" id="validateInput" /></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

Ty This Demo

body{
  background-color: #EEE;
}
#validateInput
{
  background-color: #FFFFE0;
  border: 1px solid red;
  height:20px;
}
.item {
  display: inline-block;
  position: relative;
}
.item:after
{
  content:'';
  width: 10px;
  height: 10px;
  display:block;
  background-image: url('http://i.snag.gy/C3CDl.jpg');
  position: absolute;
  right: -3px;
  top: -1px;
}

<div id='wrap'>
  <div class="item">
    <input type="text" id="validateInput" />
  </div>
</div>

Answer 4

对您的图片使用position:absolute，并将span作为亲戚。之后使用负左侧位置来制作所需的结果。

 .triangleimg
 {
   vertical-align:top;  
   position:absolute;
   left:-7px;
 }

DEMO