3

Eu tenho esta imagem:

1)

inserir a descrição da imagem aqui

2)

inserir a descrição da imagem aqui

que está a ser usada com icon para um <input>:

' <input type="button" class=" button_add" />'

Com o CSS adicionei-a a uma li:

input.button_add {
    float: right;
    height: 40px;
    padding-left: 36px;
    background: url("../img/Arrow_Circle_Right-32.png") no-repeat;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

No ponto 2) dá para verificar que a imagem não tem bordas nenhumas, mas no resultado final a imagem aparece-me assim:

inserir a descrição da imagem aqui

É possivel fazer essas bordas desaparecerem?

Obrigado pela atenção

2
  • Coloque o seu código e não imagens com o mesmo.. 28/05/2015 às 10:35
  • @CesarMiguel já está alterado 28/05/2015 às 10:39

1 Resposta 1

3

Você deve usar:

border: none;
background: url("../img/Arrow_Circle_Right-32.png") transparent no-repeat;

o transparent do background é pra evitar que sites mais antigos implementem cor no bg.... Uma dica legal, é voce clicar com o botao direito no navegador, em cima do objeto, ir em inspecionar elemento e ao lado, ou embaixo será exibido todo css dele, quase todo navegador moderno permite que você manipule o css do input exibido, dai você pode 'brincar' com o código, adicionar parâmetro, remover, até que atenda sua necessidade.

2
  • 1
    o transparent do background é pra evitar que sites mais antigos implementem cor no bg.... Uma dica legal, é voce clicar com o botao direito no navegador, em cima do objeto, ir em inspecionar elemento e ao lado, ou embaixo será exibido todo css dele, quase todo navegador moderno permite que você manipule o css do input exibido, dai você pode 'brincar 28/05/2015 às 10:46
  • Funcionou. Obrigado. 3min para aceitar como resposta. 28/05/2015 às 10:46

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 .