Input Image

HTML & CSS
1

Hello I am trying to remove an image when I hover over
my search button. I am wondering it is possible to
remove the background image of a input src image. PAGE

Here is the CSS with the image I want to replace it with.

input.gsc-search-button:hover {
    background-color: #fff !important;
    background-image: url(http://impactograph.com/images/redglass.png) !important;
    background-repeat: no-repeat;
    background-position:center;

}
2

If you are overriding someone else’s CSS just make sure place !important on it. Otherwise the code above should work. Have you tried it?

Not sure if you access to this, but where these styles are internally rendered in the head of document. So if you can, comment out(don’t delete - unless you made of copy of the original) and replace with your styles.

3

As lauren_olsen17 said, it sounds like a local style sheet with
input.gsc-search-button:hover {background-image:none !important;}
should so it, as long as the specificity is adequate.

4

Yeah I know its Google default CSS.

Thats the thing I am trying to replace it with it something else at hover
but then the white search glass still appears…

 background-image: url(http://impactograph.com/images/redglass.png) !important;

5

That’s a better description of what you want.

Try this:

.gsc-search-box:hover .gsc-search-button {
    visibility: hidden;
}
6

it just makes the whole thing dissappear

input.gsc-search-button:hover {
    background-color: #fff !important;
    background-image: url(http://impactograph.com/images/redglass.png) !important;
    background-repeat: no-repeat;
    background-position:center;

}


    .gsc-search-box:hover .gsc-search-button {
        visibility: hidden;
}
7

You’ve got to be careful replacing an image on hover, as it may take a while for the new image to load, which is an awful effect. So you’d be advised to preload it, at least.

But what are you trying to achieve here? Currently, the background color changes, which doesn’t look very good. The image is transparent, but a white background doesn’t suit it very well.

Ideally, if you want the image to change on hover, look into creating a sprite.

8

@ralphm is right. I had already forgotten that you want to replace it with something else.

9

So Google has a default white search glass in their CSS and I want to
change it to red(mine) on hover. thats all.

10

It looks like you have control over the code, so I’d suggest creating your own version as a sprite, as mentioned.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.