Search code examples
htmlcssformshtml-input

How do I add an image to an HTML input widget?

For example if you go to

https://github.com/signup/free

And type 'john' into username, a small red exclamation mark appears on the right hand side. Forgetting about the JavaScript which I know how to do, how can you get an image into the text input?

Solution

  • Here's how you can display the image the same way i.e. on the right and just fitting inside the box:

    <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>

    Use javascript to change the className as necessary.

    Hope this helps :)