How to Remove Input Image Edge

Asked

Viewed 634 times

4

I’m wearing a input image to work as a favorite button

<input type="image" class="btnFav" title="Favoritar" />

Only he gets a square edge on him Segue anexo

I’ve tried using the css down, but nothing worked.

outline-color: invert;
outline-style: none;
outline-width: medium;
-moz-outline-style: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
border: none;

Can someone help, preferably without using javascript, just with css.

Link: Jsfiddle

html css input

2 answers

3


Your problem is because the input type="image" expects an attribute to exist src, that is, the image definition should be done directly on the button, which causes the :hover does not have the correct effect, because the background image will be "behind" the src.

To solve your problem, simply change the input to submit and continue using images of :hover you already have in css.

Thus remaining:

<input type="submit" class="btnFav" title="Favoritar" value="" />

I put the attribute of value no value so that the default "Send" writing is not behind the image.

Note also that every type of input has standard css that applies edge and Outline, to get rid of it completely, just remove these properties directly in the css input, this way:

input[type="submit"] {
    border: none;
    outline:none;
}

Or just

input {
    border: none;
    outline:none;
}

See example working: http://jsfiddle.net/d63rrd2d/2/

  • Exactly what I needed, thank you for the answer and for the learning.

  • Not for that! Welcome to the =D group

1

Try the following 

input[type="image"]{
    outline: none;   
}

input[type="image"]:focus{
    outline: none;   
}

Good luck, any questions ask via comment

I did the tests on the link you gave me and no css is needed to solve the problem, do the following:

<div class="btnFav" title="Favoritar" />

Change input to div and everything is fine

  • Still it didn’t work, as I had said, I’ve tried with the outline: none in class. But thank you for trying.

  • Insert the element and see if this css rule is actually being applied

  • I just saw, yeah.

  • added border: None either as well or not ?

  • I tried with and without, and it’s still the same.

  • recommend posting the full code of your problem so I can test here and help more

  • I edited the post with the Jsfiddle link.

  • I edited my answer from a glance and forehead again

  • In fact the border is gone, but it does not perform the Hover. There is no change of images when the cursor is passed.

  • I edited my reply from a check

  • Well, after trying for a couple of hours something supposedly simple, I managed to find this forum and someone to help me, thank you very much, now it worked, I will continue attending here.

Show 6 more comments

Browser other questions tagged html css input

You are not signed in. Login or sign up in order to post.