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を必要に応じて。

希望します。

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>