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

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