Remover o botão X "limpar campo" do IE10 em determinadas entradas?

742

É um recurso útil, com certeza, mas existe alguma maneira de desativá-lo?
Por exemplo, se o formulário for um campo de texto único e já tiver um botão "limpar" ao lado, é supérfluo também ter o X. Nessa situação, seria melhor removê-lo.

Pode ser feito e, em caso afirmativo, como?

css internet-explorer-10 Niet, o Escuro Absol
fonte
1
Isso também é útil em um campo com um valor padrão, onde o espaço em branco não faz sentido, por exemplo, quantidade.
Joe Flynn
4
Como isso não está acionando uma digitação de entrada, isso é muito complicado quando você liga um evento javascript.
Kiwy

Respostas:

1267

Estilize o ::-ms-clearpseudoelemento da caixa:

.someinput::-ms-clear {
    display: none;
}
Ry-
fonte
14
É engraçado se você usar o modo de compatibilidade do IE para renderizar sua página com mecanismos anteriores ao IE10, esse pseudo elemento não funciona e mostra o botão de qualquer maneira.
Yousef Salimpour
@Yousef: Sim, é assim que funciona e parte do motivo de nunca usar o Modo de Compatibilidade em um site real. Na verdade, não é compatível :)
Ry-
@minitech - Sua IE9 no Windows 7 máquina
ManJan
3
Esse controle aparece APENAS no IE10 + no Win8. O truque é que ele ainda aparece quando o documento é colocado em um modo de compatibilidade.
EricLaw
48
@ EricLaw: Bem, NÃO SOMENTE no Win8. Estou usando o Windows 7 agora e posso ver os botões X no meu IE10. Então, você pode dizer que é um recurso exclusivo do IE10 + (embora não tenha certeza sobre o IE9), mas definitivamente NÃO é apenas o Win8, pois isso aparece na versão Win7 do IE10. De qualquer forma, obrigado pela dica, @minitech!
OMA
272

Eu achei que é melhor definir o widthe heightpara 0px. Caso contrário, o IE10 ignorará o preenchimento definido no campo - padding-rightque foi projetado para impedir que o texto fosse digitado sobre o ícone 'X' que eu sobrepus no campo de entrada. Eu estou supondo que o IE10 está aplicando internamente padding-righta entrada no ::--ms-clearpseudo elemento, e ocultar o pseudo elemento não restaura o padding-rightvalor para o input.

Isso funcionou melhor para mim:

.someinput::-ms-clear {
  width : 0;
  height: 0;
}
jimp
fonte
3
Aqui está um jsFiddle ilustrando esta solução alternativa: jsfiddle.net/zoldello/S5YRj
Phil
106

Eu aplicaria essa regra a todos os campos de entrada do tipo texto, para que não precise ser duplicada posteriormente:

input[type=text]::-ms-clear { display: none; }

Pode-se até ser menos específico usando apenas:

::-ms-clear { display: none; }

Eu usei o mesmo antes mesmo de adicionar essa resposta, mas pensei que a maioria das pessoas preferiria ser mais específica do que isso. Ambas as soluções funcionam bem.

Wallace Sidhrée
fonte
Obrigado, funcionou para mim.
Sooraj Jose
76

Você deve estilizar para ::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx ):

::-ms-clear {
   display: none;
}

E você também ::-ms-revealdenomina o campo pseudoelemento para senha:

::-ms-reveal {
   display: none;
}
ducdhm
fonte
6
Nota - pense se você pode fazer o ::-ms-revealelemento funcionar antes de removê-lo! (Ou se você estiver fornecendo esse botão para todos, como o solicitante original.) Alguns realmente o usam.
Ry-
3
@ Minitech - isso parece ótimo. Você pode nos dizer como fazê-lo funcionar com a ligação Javascript em eventos de entrada? Como não gera um evento, é quase impossível trabalhar com ele.
precisa saber é o seguinte
11

Eu acho que vale a pena notar que todas as soluções baseadas em estilo e CSS não funcionam quando uma página está sendo executada no modo de compatibilidade. O representante do modo de compatibilidade ignora o elemento :: - ms-clear, mesmo que o navegador mostre o x.

Se sua página precisar ser executada no modo de compatibilidade, você poderá ficar com o X sendo exibido.

No meu caso, estou trabalhando com alguns controles vinculados a dados de terceiros e nossa solução foi manipular o evento "onchange" e limpar o armazenamento de backup se o campo for limpo com o botão x.

TomXP411
fonte
0

Para ocultar setas e cruzar em uma entrada "hora":

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}
ClemPat
fonte