文本框设计一样文本框在Silverlight

我需要一个文本框具有相同的设计，因为我们有在Silverlight这样的：文本框设计一样文本框在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试过。任何帮助，将不胜感激。

来源

2015-12-15 Senjuti Mahapatra

如果可以改变结构，那么也可以写CSS代替的图像为箭头[小提琴]（http://jsfiddle.net/yj56g5ej/） –

感谢。这是完美的。 –

您也可以使用箭头CSS，如果你可以改变HTML结构

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

来源

2015-12-15 07:36:30

使用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

来源

2015-12-15 07:18:12 ketan

使用position:absolute为你的形象，使span为相对。之后，使用负向左位置来达到所需的结果。

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

DEMO

来源

2015-12-15 07:20:42

泰这 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>

来源

2015-12-15 07:36:52

文本框设计一样文本框在Silverlight

回答

相关问题