HTMLCSS输入按钮样式不起作用

概述我有一个按钮： 上 关闭 这是CSS： .searchButton { height: 31px; width: 33px; cursor: pointer; border: none; background:url(../img/searchButton-Off.png) no-repeat;}.searchButton:hover { height: 31px; 我有一个按钮：

上

关闭

这是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 >    <h2 >Search</h2>    <form ID="form_297586"   method="get" action="results.PHP">      <input ID="keywords" name="keywords"  title="What do you like...?" type="text" maxlength="255" value=""/>      <input type="button"  />      <input type="hIDden" name="form_ID" value="297586" />    </form>  </div>

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

苹果浏览器

歌剧

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

思考？

解决方法 按钮有很多默认样式.考虑实现重置样式表,例如：

Eric Meyer’s Reset

Normalize.css

此外,必须将元素设置为display：block或display：inline-block,以便能够在其上设置尺寸.

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

希望这可以帮助！

编辑：现在我可以看到你的例子,问题是bootstrap.CSS中的默认样式比你的样式具有更高的特异性.就像是：

input.searchbutton

应该解决问题.

总结

以上是内存溢出为你收集整理的HTML / CSS输入按钮样式不起作用全部内容，希望文章能够帮你解决HTML / CSS输入按钮样式不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。