Question

有谁知道如何将背景图片放在文本框中？我想要做的是当我点击文本框时它会用图像改变背景。有人知道怎么做吗？

我目前的代码无法运作：

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

Answer 1

CSS是首选方法

<强> CSS

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

<强> HTML

<input type="text" />

如果您仍想使用JavaScript，则需要执行此操作

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

Answer 2

<input class="changeonfocus"/>

<强> CSS

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

DEMO

Answer 3

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



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

Answer 4

要将背景图片放在input元素中，您需要在CSS中设置background-image：

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

您可以通过添加/删除类或直接使用this.style.backgroundImage以编程方式执行此操作。所以这是一个例子：

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


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

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

Demo

Answer 5

使用一些CSS样式：

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

}

如何将背景图像放在文本框中

5 个答案: