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

Question

我有一个按钮:

开启

关闭

这是 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 或 display: inline-block 以便能够在其上设置尺寸。

最后，我建议您将问题的简化示例放入 JSFiddle或 Dabblet这样人们就可以更轻松地帮助您。

希望这对您有所帮助!

编辑: 现在我可以看到您的示例，问题是 bootstrap.css 中的默认样式比您的样式具有更高的特异性。像这样的东西:

input.searchButton

应该可以解决问题。