Question

我只是想在我的表单中将背景图像设置为我的提交按钮。我尝试了几种方法，但每次都得到默认的浏览器按钮。谁知道我在哪里错了？

HTML

<div id="headerSearch">
    <form method="post" action="Test.php">
        <div id="headerSearchBar">
            <input class="tbSearch" type="text" name="search" size="12" placeholder="Search...">
        </div>
        <div id="headerSearchBtn">
            <input class="btnSearch" id="button" name="submit" type="submit" value="">
        </div>
    </form>
</div>

CSS

#headerSearch{
    float:right;    
    width:80%;
    height:80px;
}
#headerSearchBar{
    float:left;
    width:90%;
    height:80px;

}
.tbSearch{
    height:25px;
    width:95%;
    margin-top:27.5px;
    margin-left:2%;
    margin-right:0;
    margin-bottom:0
}
#headerSearchBtn{
    float:right;
    width:10%;
    height:80px;
    text-align:center;
}
.btnSearch{
    background-image:url(../IMAGES/btnSearch.svg) no-repeat;
    width:25px;
    height:25px;
    margin-top:27.5px;
}

Answer 1

您只需使用background

background:url(../IMAGES/btnSearch.svg) no-repeat;

Answer 2

我找到了解决问题的方法，正如Michael St Clair所说，我需要在css中使用background而不是background-image。这删除了默认的浏览器图像，但没有显示我选择的图像。

我使用了另一种方法，现在已经解决了这个问题，我之前使用background-image标签尝试了此方法，而不是迈克尔圣克莱尔建议的background，现在所有人都拥有解决了这个问题。

<强> HTML

<input class="btnSearch" id="btnSearch" name="btnSearch" type="submit" value="">

<强> CSS

.btnSearch{
    width:25px;
    height:25px;
    margin-top:27.5px;
}

input#btnSearch{
    background:url(../IMAGES/btnSearch.svg) no-repeat;
}

Answer 3

将viewModel添加到按钮css中。这样的事情：http://codepen.io/shreya1289/pen/QEKGWa

设置提交表单按钮与背景图像？

3 个答案: