CODEWITHSUNDEEP
csshtml
user3340637
user3340637

Reputation: 43

How to put background image inside textbox

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

my current code wont work:

<input onfocus="this.style.background='images/activebutton.png'" />

Upvotes: 0

Views: 25705

Answers (5)

gbade_
gbade_

Reputation: 349

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



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

Upvotes: 1

Tun Zarni Kyaw
Tun Zarni Kyaw

Reputation: 2119

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=''"
/>

Upvotes: 4

Simone
Simone

Reputation: 21262

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

Upvotes: 0

Kawinesh S K
Kawinesh S K

Reputation: 3220

<input class="changeonfocus"/>

CSS

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

DEMO

Upvotes: 2

ltalhouarne
ltalhouarne

Reputation: 4636

Use some css styling: 

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

}

Upvotes: 0

Related Questions