HTML / CSS输入按钮样式不起作用

Question

我有一个按钮：

ON

OFF

这是CSS：

.searchButton {
  height: 31px;
  width: 33px;
  cursor: pointer;
  border: none;
  background:url(../img/searchButton-Off.png) no-repeat;
}

.searchButton:hover {
  height: 31px;
  width: 33px;
  cursor: pointer;
  border: none;
  background:url(../img/searchButton-On.png) no-repeat;
}

这是HTML：

  <div class="searchBox">
    <h2 style="color:000000;">Search</h2>
    <form id="form_297586" class="appnitro"  method="get" action="results.php">
      <input id="keywords" name="keywords" class="searchBar" title="What do you like...?" type="text" maxlength="255" value=""/>
      <input type="button" class="searchButton" />
      <input type="hidden" name="form_id" value="297586" />
    </form>
  </div>

以下是我的浏览器呈现的内容：

苹果浏览器 戏

当鼠标悬停在按钮上时，它正确切换，然后将显示整个按钮。我不确定为什么会发生这种情况。

思想？

Answer 1

按钮附加了许多默认样式。考虑实现重置样式表，例如：

Eric Meyer's Reset

Normalize.css

此外，必须将元素设置为display: block或显示：inline-block才能在其上设置尺寸。

最后，我建议您将问题的简化示例放入JSFiddle或Dabblet，以便人们更方便地帮助您。

希望这有帮助！

编辑：现在我可以看到你的例子，问题是bootstrap.css中的默认样式比你的样式具有更高的特异性。类似的东西：

input.searchButton

应该解决问题。

Answer 2

这可能是一种特殊情况，其中一组更具体的条件优先。

试试这个：

.searchButton { 
  height: 31px !important; 
  width: 33px !important; 
  cursor: pointer; 
  border: none; 
  background:url(../img/searchButton-Off.png) no-repeat; 
} 

或者你可以试试：

form.appnitro .searchButton {

Answer 3

background：url（“../ img / searchButton-Off.png”）white no-repeat 9px;

只需将9px更改为任何px并相应地进行操作并增加高度：50px重量：50px

Answer 4

错了！

你有

您也使用过：

input[type=button].[class name]

或者您可以使用：

<button class='x' ></button> 

和CSS：

button.x{
}