如何將圖像添加到HTML輸入窗口小部件？

Question

例如，如果你去

https://github.com/signup/free

，並鍵入「約翰」爲用戶名，出現在右手邊的小紅色感嘆號。忘了我知道該怎麼做的JavaScript，怎樣才能在文本輸入中獲得圖像？

Answer 1

這裏是你如何可以顯示圖像以同樣的方式，即在右側，盒內只是配件：

<style type="text/css"> 
.input_error_bg { 
    background-image: url("myimage.png"); 
    background-size: contain; 
    -moz-background-size: contain; 
    -webkit-background-size: contain; 
    -khtml-background-size: contain; 
    -o-background-size: contain; 
    background-position: right 50%; 
    background-repeat: no-repeat; 
} 
.input_bg { 
    background: none; 
} 
</style> 

<form action="signup.php" method="POST"> 
<input class="input_error_bg" type="text" /> 
</form> 

使用JavaScript來改變的className有必要的。

希望這會有所幫助:)

Answer 2

您可以使圖像成爲輸入元素背景的一部分。

Answer 3

這是一個CSS backgound-image。

例：

input { 
    background-image: url("/images/modules/ajax/error.png"); 
} 

您也可以通過使用CSS background shorthand property指定圖像。

Answer 4

如果你不想使用背景圖片（所以你可以使用一個精靈圖標，如jQuery UI），你可以使用絕對定位覆蓋圖標。

例（未經測試）：

<div style='display: inline-block; position: relative;'> 
    <input type=text /> 
    <span class='ui-icon ui-icon-alert ui-state-error' style='position: absolute; display: block; margin-top: -8px; top: 50%; right: 4px;' /> 
</div>