Question

我试图将图片添加到我的文本框

这是代码

<form id="findPromo">
    <input type="text" name="find" placeholder="I'm Looking For...">
    <input type="button" value="Search">
</form>

CSS

#findPromo input[type="text"] {
    background: url(image/find.png) no-repeat 10px 6px #444;
    background: #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#findPromo input[type="text"]:focus {
    background: url(image/find.png) no-repeat 10px 6px #444;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

但图像没有出现

谁知道怎么做？

感谢

Answer 1

这是因为如果删除该行，则用background: #444;覆盖背景prorepty，显示图像：

<强> DEMO

Answer 2

在第一个CSS规则集中，首先将背景设置为图像，然后使用background: #444规则覆盖它。您不仅要覆盖背景颜色，还要覆盖整个background语句。

由于您在第一个语句中已经有#444，因此您可以安全地删除第二个语句。

在textbox css中添加图像

2 个答案: