CODEWITHSUNDEEP
htmlcssbutton
Jon
Jon

Reputation: 3184

HTML/CSS Input Button Styling Not Working

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?

Upvotes: 6

Views: 44190

Answers (4)

George Chokhonelidze
George Chokhonelidze

Reputation: 31

wrong!

you have

you have too use : 

input[type=button].[class name]

or you can use:

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

and Css:

button.x{
}

Upvotes: 3

Tim Hettler
Tim Hettler

Reputation: 1256

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.

Upvotes: 8

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93424

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 {

Upvotes: 3

Arpit Srivastava
Arpit Srivastava

Reputation: 2235

background: url("../img/searchButton-Off.png") white no-repeat 9px;

just change 9px to any px and do it accordingly and also increase height:50px weight:50px

Upvotes: 0

Related Questions