CODEWITHSUNDEEP
csshtmlforms
user3708170
user3708170

Reputation: 13

Submit button with strange background

I have a submit button which I use a image that changes on hover, but it has a gray background on the button and I can't remove it.

It's not my images I'm sure!

HTML:

<form method="POST" action="add.php" onsubmit="return validateForm();">
  <input type="text" name="name" id="input" maxlength="35" placeholder="NOME COMPLETO" autocomplete="off" />
  <input type="submit" src="add.png" class="submit" value="">
</form>

CSS:

.submit {
    position: absolute;
    cursor: pointer;
    border: none;
    top: 45%;
    left: 73%;
    width: 45px;
    height: 45px;
    background-image: url(add.png);
    background-repeat: no-repeat;
}

.submit:hover {
    position: absolute;
    cursor: pointer;
    border: none;
    top: 45%;
    left: 73%;
    width: 45px;
    height: 45px;
    background-image: url(add-hover.png);
    background-repeat: no-repeat;
}

Please guys, help me! I'm desperate

Upvotes: 1

Views: 100

Answers (3)

Luuuud
Luuuud

Reputation: 4439

I've created a fiddle of your case: http://jsfiddle.net/K7yx4/

This one is working, since I've corrected some mistakes:

First:

You don't need a src attribute on an input if you already used CSS to get image in. (and vice versa)

I've closed the input[type=submit] tag (/>)

In CSS you don't need to copy all properties and values for pseudo-classes. Only the values that actually change need are necessary.

Just look at the fiddle, I guess you'll figure it out for yourself!

Upvotes: 1

schlenger
schlenger

Reputation: 1557

Hi,

works fine for me, just add: background-color: white;

edit: Also you don't need to redefine the position attributes at the :hover section ;)

Hope it works, Greetings Mat

Upvotes: 1

Adam Fullen
Adam Fullen

Reputation: 126

You want to add background-color: transparent; to these definitions to remove default control styling.

background-color: transparent;

Upvotes: 0

Related Questions