4

Eu estou usando um input de image para funcionar como um botão de favorito

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

Só que ele fica com uma borda quadrada nele Segue anexo

Já tentei usar o css abaixo, mas nada funcionou.

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;

Alguém pode ajudar, de preferência sem usar javascript, apenas com css.

Link: JSFiddle

2 Respostas 2

3

O seu problema ocorre pois o input type="image" espera que exista um atributo src, ou seja, a definição da imagem deve ser feita diretamente no botão, o que faz com o que o :hover não tenha o efeito correto, pois a imagem de background estará "atrás" da imagem de src.

Para resolver o seu problema, basta mudar o input para submit e continuar usando as imagens de :hover que você já possui em css.

Ficando assim:

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

Coloquei o atributo de value sem nenhum valor para que não fique a escrita padrão de "Enviar" por trás da imagem.

Note também que todo tipo de input possui css padrão que aplica borda e outline, para se livrar completamente, basta remover essas propriedades diretamente no css do input, deste modo:

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

Ou apenas

input {
    border: none;
    outline:none;
}

Veja o exemplo funcionando: http://jsfiddle.net/d63rrd2d/2/

2
  • Exatamente o que eu precisava, obrigado pela resposta e pelo aprendizado.
    – Caiera
    21/11/2015 às 0:15
  • Não por isso! Seja bem vindo ao grupo =D 21/11/2015 às 0:16
1

Tente o seguinte

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

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

Boa sorte, qualquer dúvida pergunte via comentário


Fiz os testes no link que me passou e nenhum css é preciso para resolver o problema, faça o seguinte:

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

Troque de input para div e tudo fica certo

11
  • Ainda assim não funcionou, como eu havia dito, eu já tentei com o outline: none na classe. Mas obrigado pela tentativa.
    – Caiera
    20/11/2015 às 23:22
  • inspecione o elemente e veja se essa regra css realmente está sendo aplicada 20/11/2015 às 23:26
  • Acabei de ver, está sim.
    – Caiera
    20/11/2015 às 23:31
  • adicionou o border: none tambem ou não ? 20/11/2015 às 23:33
  • Tentei com e sem, e continua na mesma.
    – Caiera
    20/11/2015 às 23:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .