HTML/CSS Input Button Styling Not Working
button, css, html
Solution
Buttons have a lot of default styling attached to them. Consider implementing a reset stylesheet, like:
Eric Meyer's Reset
Normalize.css
Also, an element must be set to `display: block` or display: `inline-block` in order for dimensions to be able to be set on it.
Finally, I recommend that you put a simplified example of your problem into JSFiddle or Dabblet so that it's easier for people to help you out.
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:
input.searchButton
Should solve the problem.
Problem
I have a button: ON OFF Here's the 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: ``` <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?