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

【问题标题】：HTML/CSS Input Button Styling Not WorkingHTML/CSS 输入按钮样式不起作用
【发布时间】：2012-04-17 18:19:43
【问题描述】：

我有一个按钮：

开

关闭

这是 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>

这是我的浏览器正在呈现的内容：

苹果浏览器歌剧

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

想法？

【问题讨论】：

我的第一个猜测是样式出了点问题，并且正在使用按钮文本的宽度而不是您在样式表中定义的宽度。如果您在按钮上设置一个值以放入文本，例如 value="test" 会发生什么？
在 Opera、Chrome 和 Firefox 中运行良好：jsfiddle.net/j08691/63Lt7。顺便说一句，我会在这里使用精灵来防止图像闪烁。
我将如何使用 CSS sprites 来做到这一点？我对 CSS 比较陌生，所以对它们没有经验。
还有 j08691，奇怪的是它在 jsfiddle 上工作。我不确定我的代码有什么不同。也许错误在其他地方并且某些东西被覆盖了。

标签： html css button

【解决方案1】：

按钮有很多附加的默认样式。考虑实现一个重置样式表，例如：

Eric Meyer's Reset

Normalize.css

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

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

希望这会有所帮助！

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

input.searchButton

应该能解决问题。

【讨论】：

class="button.searchButton" ?
知道了！谢谢一堆。我想是这样的。

【解决方案2】：

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

试试这个：

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

或者你可以试试：

form.appnitro .searchButton {

【讨论】：

!important 似乎有效。我仍然打算把它变成一个精灵，但这解决了任何问题。谢谢！

【解决方案3】：

错了！

你有

你也用过：

input[type=button].[class name]

或者你可以使用：

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

和CSS：

button.x{
}

【讨论】：

【解决方案4】：

背景：url("../img/searchButton-Off.png") 白色无重复9px;

只需将 9px 更改为任何 px 并相应地进行操作并增加 height:50px weight:50px

【讨论】：

@Jon-你能把这段代码放在 jsfiddle.net 上，我会编辑它