HTML/CSS 输入按钮样式不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10196763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS Input Button Styling Not Working
提问by Jon
I have a button:
我有一个按钮：
ON
在
OFF
离开
Here's the CSS:
这是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;
}
Here's the HTML:
这是 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>
Here's what my browser is rendering:
这是我的浏览器呈现的内容：
Safari
Opera
野生动物园
歌剧
When I mouseover the button, it is correctly switching, and then will display the entire button. I'm not sure why this behavior is happening.
当我将鼠标悬停在按钮上时，它正在正确切换，然后将显示整个按钮。我不确定为什么会发生这种行为。
Thoughts?
想法？
回答by Tim Hettler
Buttons have a lot of default styling attached to them. Consider implementing a reset stylesheet, like:
按钮附有许多默认样式。考虑实现一个重置样式表，例如：
Also, an element must be set to display: blockor display: inline-blockin order for dimensions to be able to be set on it.
此外，元素必须设置为display: block或显示：inline-block以便能够在其上设置尺寸。
Finally, I recommend that you put a simplified example of your problem into JSFiddleor Dabbletso that it's easier for people to help you out.
最后，我建议您将问题的简化示例放入JSFiddle或Dabblet 中，以便人们更轻松地帮助您。
Hope this helps!
希望这可以帮助！
EDIT:Now that I can see your example, the problem is that the default styles in bootstrap.css have a higher specificity than your styles. Something like:
编辑：现在我可以看到您的示例，问题是 bootstrap.css 中的默认样式比您的样式具有更高的特异性。就像是：
input.searchButton
Should solve the problem.
应该可以解决问题。
回答by Erik Funkenbusch
This is probably a case of specificity, where a more specific set of conditions is taking precedence.
这可能是一种特殊情况，其中一组更具体的条件优先。
Try this:
尝试这个：
.searchButton {
height: 31px !important;
width: 33px !important;
cursor: pointer;
border: none;
background:url(../img/searchButton-Off.png) no-repeat;
}
Or you could try:
或者你可以试试：
form.appnitro .searchButton {
回答by Arpit Srivastava
background: url("../img/searchButton-Off.png") white no-repeat 9px;
背景： url("../img/searchButton-Off.png") 白色无重复 9px；
just change 9px to any px and do it accordingly and also increase height:50px weight:50px
只需将 9px 更改为任何 px 并相应地执行并增加 height:50px weight:50px
回答by George Chokhonelidze
wrong!
错误的！
you have
你有
you have too use :
你也用过：
input[type=button].[class name]
or you can use:
或者你可以使用：
<button class='x' ></button>
and Css:
和CSS：
button.x{
}
