Remover borda dos botões


109

Tentei criar botões e inserir minhas próprias imagens em vez das imagens de botão padrão. No entanto, a borda cinza dos botões padrão ainda permanece, aparecendo na parte externa das imagens dos meus botões pretos.

Alguém sabe como remover essa borda cinza do botão, então é apenas a própria imagem? Obrigado.


Experimente -webkit-appearance: inherit;ou-webkit-appearance:initial
Máximo de

1
@Brut: Posso estar errado, mas isso parece específico do navegador para mim, e tenho certeza que Jameson quer algo que funcione para todos os navegadores modernos.
Michael Scheper

Respostas:


185

Adicionar

padding: 0;
border: none;
background: none;

aos seus botões.

Demo:

https://jsfiddle.net/Vestride/dkr9b/


Agradeço ... mas adicionei exatamente como você disse à folha de estilo e infelizmente não funcionou. Devo apenas incorporá-lo diretamente no html, se isso fizer diferença?
JamesonW

Adicionei um sinal de adição de violino background: none;aos botões. Dê uma olhada no violino e veja se isso funciona para você.
Vestride

37

Isso parece funcionar perfeitamente para mim.

button:focus { outline: none; }

4
outline:none;não é recomendado por razões de acessibilidade. Se você precisar remover a borda de foco, forneça outra maneira para os usuários verem se ela tem foco. outlinenone.com
Vestride

9

Eu estava tendo o mesmo problema e embora estivesse estilizando meu botão em CSS, ele nunca pegaria o, border:nonemas o que funcionou foi adicionar um estilo diretamente no botão de entrada como:

<div style="text-align:center;">
    <input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>

você está usando a cascata CSS para substituir a propriedade por um estilo embutido. Você deve verificar alguns artigos sobre cascata CSS e especificidade CSS.
DrCord


1

O truque usual é tornar a própria imagem parte de um link em vez de um botão. Em seguida, você vincula o evento "click" a um manipulador personalizado.

Frameworks como Jquery-UI ou Bootstrap fazem isso fora da caixa. A utilização de um deles pode facilitar muito a concepção de todo o aplicativo.


1

Você também pode tentar background:none;border:0pxbotões.

também os seletores de css são div#yes button{..}e div#no button{..}. espera que ajude


Além disso, você pode definir o plano de fundo do botão como imagens, em vez de usar tags img

Ou faça isso em CSS puro. likebackground:#555; font-weight:bold: color:#fff; padding:6px 8px;

0

Para remover a 'borda azul' padrão do botão no foco do botão:

Em Html:

<button class="new-button">New Button...</button>

E em css

button.new-button:focus {
    outline: none;
}

Espero que ajude :)



-3

$ (". myButtonClass"). css (["border: none; background-color: white; padding: 0"]);


3
Lol você não deve usar jquery para uma mudança de estilo de css
zardilior
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.