Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML/CSS Input Button Styling Not Working

Tags:

html

css

button

I have a button:

enter image description here ON

enter image description here 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:

enter image description here Safari enter image description here 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?

like image 356
Jon Avatar asked Apr 17 '12 18:04

Jon


1 Answers

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.

like image 149
Tim Hettler Avatar answered Oct 21 '22 12:10

Tim Hettler