文本框設計一樣文本框在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

回答

相關問題