html - HTML 入力ウィジェットに画像を追加するにはどうすればよいですか?

Question

たとえば、

https://github.com/signup/free

ユーザー名に「john」と入力すると、右側に小さな赤い感嘆符が表示されます。私が知っている 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

背景画像を使用したくない (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>