Remova o estilo completo de um botão HTML / enviar

94

Existe uma maneira de remover completamente o estilo de um botão no Internet Explorer? Eu uso um sprite css para o meu botão, e tudo parece ok.

Mas quando clico no botão, ele se move um pouco para o topo, fazendo com que pareça fora de forma. Existe um estado de clique de css ou mouseedown? Não sei o que desencadeia esse estado.

Sei que não é grande coisa, mas às vezes são as pequenas coisas que importam.

Saif Bechan
fonte

Respostas:

71

Estou assumindo que quando você diz ' clique no botão, ele se move um pouco para o topo ', você está falando sobre o estado de clique do botão para baixo e que, quando você solta o clique do mouse, ele retorna ao seu estado normal ? E que você está desativando a renderização padrão do botão usando:

input, button, submit { border:none; } 

Se então..

Pessoalmente, descobri que você não pode realmente parar / substituir / desativar essa ação nativa do IE, o que me levou a alterar um pouco minha marcação para permitir esse movimento e não afetar a aparência geral do botão para os vários estados.

Esta é minha marcação final:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

um darren
fonte
131

Acho que isso fornece uma abordagem mais completa:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
<button>Example</button>

Kevin leary
fonte
2
Não acho que o histórico tenha um 'nenhum' - e o! Importante não é bom.
sheriffderek
4
Normalmente, ao fazer isso, você deseja substituir os estilos existentes para um botão. É raro que você queira fazer isso com um HTML limpo e sem estilo, daí o uso de !important. Dito isso, eu o removi porque é uma decisão da situação. background: noneé totalmente válido: stackoverflow.com/questions/20784292/…
Kevin Leary
Para cada um no que diz respeito a! Importante. Não acho que poderia trabalhar em um projeto em que fui forçado a usá-lo. RE: 'nenhum' Aqui está uma referência que é melhor do que um post SO. Quando você usa 'background' por si só, você está realmente usando taquigrafia e superando todos os atributos.
sheriffderek
Eu estava me deixando louco com a diferença entre estilizar uma imagem e algum texto dentro de um botão e fazê-lo parecer o mesmo que fora de um <button/>... no meu caso, font: inherit;funcionou. Obrigado!
Kate
3
Acho que, para fins de acessibilidade, você provavelmente deseja deixar esse esboço aí. caso contrário, quando você passar por cima dele, não haverá indicação visual de onde você está. ótima resposta embora!
John Hooper
43

Sua pergunta diz "Internet Explorer", mas para aqueles interessados ​​em outros navegadores, agora você pode usar all: unsetbotões para removê-los.

Não funciona no IE ou Edge 18, mas é bem suportado em qualquer outro lugar.

https://caniuse.com/#feat=css-all

Aviso de cor do Safari: a configuração do texto colordo botão após o uso all: unsetpode falhar no Safari 13.1, devido a um bug no WebKit . (O bug será corrigido no Safari 14 e superior.) " all: unsetEstá definido -webkit-text-fill-colorcomo preto e substitui a cor." Se você precisar definir o texto colorapós o uso all: unset, certifique-se de definir o colore o -webkit-text-fill-colorcom a mesma cor.

Aviso de acessibilidade: para o bem dos usuários que não estão usando o ponteiro do mouse, certifique-se de adicionar novamente alguns :focusestilos, por exemplo, button:focus { outline: orange auto 5px }para acessibilidade do teclado .

E não se esqueça cursor: pointer. all: unsetremove todo o estilo, incluindo o cursor: pointer, o que faz com que o cursor do mouse pareça uma mão apontando quando você passa o mouse sobre o botão. Você quase certamente deseja trazer isso de volta.

button {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}
<button>check it out</button>

Dan Fabulich
fonte
1
Obrigado por isso!
Will Ediger
Isso não é aconselhável por motivos de acessibilidade. Você precisará adicionar de volta todos os outlineestilos para o :focusestado do elemento, por exemplo.
Devin,
@Devin Ótimo ponto! Eu atualizei minha postagem com uma sugestão para adicionar novamente um outlineestilo. (Mas não acho que haja mais nada a ser adicionado para todos os fins. Você sabe de alguma coisa?)
Dan Fabulich,
8

Tente remover a borda do botão:

input, button, submit
{
  border:none;
}
Sarfraz
fonte
4

No bootstrap 4 é mais fácil. Você pode usar as classes: bg-transparenteborder-0

ValRob
fonte
+ shadow-nonepara mim e é suficiente. THX!
Bachet
0

Acho que é o estado do botão "ativo".

Midhat
fonte
Tem que ser o estado ativo, você tem razão +1 para isso. Mas eu não fiz funcionar corretamente
Saif Bechan,
"Eu acho" não é uma resposta.
shinzou