我需要制作一个与我们在 silverlight 中设计相同的文本框,如下所示:
现在,问题出在文本框右上角的小三 Angular 形上。我无法将其定位在文本框上。我的文本框看起来像这样:
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对于到目前为止我已经尝试过的代码。任何帮助将不胜感激。
最佳答案
如果可以更改html结构,也可以将css用于箭头
#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;
}
<div id='wrap'>
<span><input type="text" id="validateInput" /></span>
</div>
关于html - 文本框设计与 Silverlight 中的文本框相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34283041/