How to put background image inside textbox

Question

does anyone know how to put background image inside a textbox? i want to do is when i click the textbox it will change the background with an image.Does anyone know how to do th

Answer 1

<input type="text" class="litebox_input">



.litebox_input:focus { 
  background-image: url(images/edit.png);
  background-repeat:repeat-y;
  background-position:right;
}

Answer 2

CSS is the preferred method

CSS

<style>
    input[type="text"]:focus{
        background-image: url('images/activebutton.png');
    }
</style>

HTML

<input type="text" />

---

If you still want to use JavaScript you need to do like this

<input type="text" 
onfocus="this.style.backgroundImage='url(images/activebutton.png)';" 
onblur="this.style.backgroundImage=''"
/>

Answer 3

To put a background image inside an input element you need to set background-image in CSS:

input {
    background-image: url('image.png');
}

You can do it programmatically via JavaScript by adding/removing a class, or directly using this.style.backgroundImage. So here's an example:

<input id="i" type="text" />


var i = document.getElementById('i');

i.addEventListener('click', function() {
  i.style.backgroundImage = "url('image.png')";
});

Demo

Answer 4

Use some css styling:

inputBox{
  background:url('images/activebutton.png');

}

Answer 5

<input class="changeonfocus"/>

CSS

.changeonfocus:focus{
   background-image: url('image.png');
}

DEMO