Html 如何将背景图像放入文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21958760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put background image inside textbox
提问by user3340637
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'" />
回答by Tun Zarni Kyaw
CSS is the preferredmethod
CSS 是首选方法
CSS
CSS
<style>
input[type="text"]:focus{
background-image: url('images/activebutton.png');
}
</style>
HTML
HTML
<input type="text" />
If you still want to use JavaScript you need to do like this
如果你仍然想使用 JavaScript 你需要这样做
<input type="text"
onfocus="this.style.backgroundImage='url(images/activebutton.png)';"
onblur="this.style.backgroundImage=''"
/>
回答by Kawinesh SK
回答by gbade_
<input type="text" class="litebox_input">
.litebox_input:focus {
background-image: url(images/edit.png);
background-repeat:repeat-y;
background-position:right;
}
回答by Simone
To put a background image inside an inputelement you need to set background-imagein CSS:
要将背景图像放入input元素中，您需要background-image在 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:
您可以通过 JavaScript 通过添加/删除类或直接使用this.style.backgroundImage. 所以这是一个例子：
<input id="i" type="text" />
var i = document.getElementById('i');
i.addEventListener('click', function() {
i.style.backgroundImage = "url('image.png')";
});
回答by ltalhouarne
Use some css styling:
使用一些 css 样式：
inputBox{
background:url('images/activebutton.png');
}
