CODEWITHSUNDEEP
htmlcssstyling
user2261248
user2261248

Reputation:

Input button image disappears on submit

I have a form:

<form action="/search" class="search-form" method="get">
    <fieldset>
        <input id="q" name="q" type="text" value="Enter search text here">
        <input type="submit" value="search" class="search-button">
    </fieldset>
 </form>

With some CSS to style the button:

.search-button
{
    background:url("images/search.gif") no-repeat 0 center;
    text-indent: -9000px;
    border:none;
    display:inline-block;
    width: 23px;
    background-position-y: 4px;
    background-position-x: 5px;
}
.search-button:hover
{
    background:url("images/search.gif") no-repeat 0 center;
    text-indent: -9000px;
    border:none;
    display:inline-block;
    width: 23px;
    background-position-y: 4px;
    background-position-x: 5px;
    opacity:.8;
}

When I hover over the button, the opacity changes as expected.

If I click the button and move the mouse pointer away, the button becomes a grey square as the next page loads.

What's going on here?

Upvotes: 0

Views: 679

Answers (2)

Manwal
Manwal

Reputation: 23836

Try to add active state's style also this also:

.search-button:active {...}

@Solution Updates:

Adding :default state fix issue.

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

The following snippet seems to be working, so it is hard to reproduce the problem.

The rules in .search-button are inherited in .search-button:hover, so you do not need to repeat them, see below.

Note: background-position-y and background-position-x are not valid CSS properties.

See reference: http://www.w3.org/TR/css3-background/#the-background-position

.search-button {
  background: url("http://placehold.it/50x25") no-repeat 0 center;
  text-indent: -9000px;
  border: none;
  display: inline-block;
  width: 23px;
}
.search-button:hover {
  opacity: .8;
}
<form action="#" class="search-form" method="get">
  <fieldset>
    <input id="q" name="q" type="text" value="Enter search text here">
    <input type="submit" value="search" class="search-button">
  </fieldset>
</form>

Upvotes: 1

Related Questions