HTML/CSS Input Button Styling Not Working

Question

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 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?

My first guess is that something is going wrong with the styles, and the width of the text of the button is being used instead of the width you are defining in your stylesheet. What happens if you set a value on the button to put text in, like value="test" ? — Katie Kilian
– Katie Kilian, Commented Apr 17, 2012 at 18:23
Works fine here in Opera, Chrome, and Firefox: jsfiddle.net/j08691/63Lt7. BTW I'd use a sprite here to prevent image flicker. — j08691
– j08691, Commented Apr 17, 2012 at 18:25
How would I do it with CSS sprites? I'm relatively new to CSS, so I have no experience with them. — Jon
– Jon, Commented Apr 17, 2012 at 18:29
And j08691, that's odd that it's working on jsfiddle. I'm not sure what's different about my code. Perhaps the error is elsewhere and something is being overridden. — Jon
– Jon, Commented Apr 17, 2012 at 18:30

Tim Hettler · Accepted Answer · 2012-04-17 18:33:06Z

8

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.

answered Apr 17, 2012 at 18:33

Tim Hettler

1,2569 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Over a year ago

class="button.searchButton" ?

Jon Over a year ago

Got it! Thanks a bunch. I figured it was something like that.

Erik Funkenbusch · Accepted Answer · 2012-04-17 18:32:55Z

3

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 {

answered Apr 17, 2012 at 18:32

Erik Funkenbusch

93.7k29 gold badges201 silver badges292 bronze badges

1 Comment

Jon Over a year ago

!important seems to work. I'm still going to look into making it a sprite, but this fixed whatever the issue was. Thanks!

georgeawg · Accepted Answer · 2018-08-22 22:27:34Z

3

wrong!

you have

you have too use :

input[type=button].[class name]

or you can use:

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

and Css:

button.x{
}

edited Aug 22, 2018 at 22:27

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Aug 22, 2018 at 22:09

George Chokhonelidze

311 bronze badge

Comments

Arpit Srivastava · Accepted Answer · 2012-04-17 18:25:09Z

0

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

answered Apr 17, 2012 at 18:25

Arpit Srivastava

2,2351 gold badge16 silver badges28 bronze badges

1 Comment

Arpit Srivastava Over a year ago

@Jon-can you put this code on jsfiddle.net and I will edit on it

Collectives™ on Stack Overflow

HTML/CSS Input Button Styling Not Working

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related