Mostrar IE: ms-clear pseudo elemento em pequenos elementos de entrada?

Question

Mostrar IE: ms-clear pseudo elemento em pequenos elementos de entrada?

Tenho vários elementos de entrada para datas e textos. Se sua largura é maior que 94px o "X" ::-ms-clear é mostrado, mas algumas das minhas entradas são menores.

Existe uma maneira de dizer ao IE para mostrar o " X " mesmo que os elementos de entrada tenham apenas 50-60px de largura? A solução deve funcionar para a IE9 e superior.

1

html css internet-explorer pseudo-element

Author: Peter Mueller, 2016-01-12

Source

1 answers

score 0 · Accepted Answer

A sua melhor opção aqui é desactivar o botão de limpeza personalizado e fornecer o seu próprio. Poderá desactivar o botão Limpar no Internet Explorer e no Microsoft Edge assim:

::-ms-clear { display: none }

Isto não irá, No entanto, desactivar o botão de limpeza personalizado noutros navegadores, como o Google Chrome. No Chrome, terá de procurar um pseudo-elemento diferente:

::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

O padrão acima é entendido tanto pelo Chrome como pela Microsoft Edge . Para Internet Explorer, você vai precisar continue usando o elemento anterior ::-ms-clear também.

Com estes elementos escondidos, podemos agora fornecer os nossos.

<form>
    <input type="search">
    <button class="clear">&#x2715;</button>
</form>

Podemos então usar delegação de eventos para interceptar eventos click em .clear no Pai <form>:

var form = document.querySelector( "form" );

form.addEventListener( "click", function ( event ) {
    event.preventDefault();
    if ( event.target.className === "clear" ) {
        event.target.previousElementSibling.value = "";
    }
});

Pode ver o resultado final online em https://jsfiddle.net/jonathansampson/ety8bx93/.