將圖像圖標添加到輸入標籤

我想將圖標圖像添加到輸入標籤並想知道是否有人對該主題有一些輸入。將圖像圖標添加到輸入標籤

我的電流輸入標籤：

<input class="glossyBtn" type="submit" name="button" style="vertical-align: middle" value="Select"/>

我的形象，我想添加到輸入所以這將是對文本的左側（價值）：提前

<img alt="" style="vertical-align: middle" src="<%:Url.Content("~/Content/images/user.png")%>" />

謝謝！

來源

2012-09-04 Masriyah

設定該圖像作爲glossyBtn CSS類的background。

變化與當地圖像的圖像路徑。

.glossyBtn 
{ 
    background-image:url('http://i50.tinypic.com/20keohf.jpg'); 
    background-repeat:no-repeat; 
    background-position:left top; padding-left:15px; 
}

工作樣本：http://jsfiddle.net/6Nfvz/13/

來源

2012-09-04 14:07:00 Shyju

感謝這很好。我做了一些改變，使他們自己的類中的上述屬性，以便我的類是「glossyBtn addIcon」，並將其添加到addIcon：hover。謝謝！ – Masriyah

@Amina：你是最受歡迎的。很高興我可以幫助:) – Shyju

試試這個。請將圖像路徑，並相應地填充

.glossyBtn { 
background:url(../Content/images/user.png) left top no-repeat; 
padding-left:15px; 
}

來源

2012-09-04 14:07:23 Carlos

當我試過這整個輸入的背景變成了白色。當我嘗試添加background-size：16px 16px時，它仍然沒有影響。我不希望背景顏色改變 – Masriyah

設置使用glossyBtn background，也是圖像嘗試background-size添加高度和寬度...

來源

2012-09-04 14:09:31

如果圖像需要可以點擊就可以打造出更復雜的控制：

http://jsfiddle.net/NXAuT/1/

<div class="con"> 
    <input type="text" /> 
    <img src="MY_IMAGE.PNG" /> 
</div> 

.con { width:180px; position:relative; border:1px solid #ccc; } 
.con input { margin:0 0 0 4px; border:0; } 
.con img { display:block; position:absolute; top:4px; left:164px; cursor:pointer; } 

$(".con img").click(function() { 
    alert("Handler for .click() called."); 
});

如果圖像沒有click事件作爲與其相關聯，然後遵循其他人的建議並將其作爲背景圖像。

來源

2012-09-04 14:18:26 Lowkase

將圖像圖標添加到輸入標籤

回答

相關問題