在小输入元素中显示 IE ::ms-clear 伪元素？

Question

我有几个用于日期和文本的输入元素。如果它们的宽度大于 94px，则会显示 "X" ::-ms-clear 但我的一些输入更小。

有没有办法告诉 IE 显示 "X" 即使输入元素只有 50-60 像素宽？该解决方案应该适用于 IE9 及更高版本。

Answer 1

您最好的选择是禁用自定义清除按钮，并提供您自己的按钮。您可以像这样禁用 Internet Explorer 和 Microsoft Edge 中的清除按钮：

::-ms-clear { display: none }

但是，这不会在其他浏览器中禁用自定义清除按钮，例如 Google Chrome。在 Chrome 中，您需要定位不同的 pseudo-element:

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

Chrome和 Microsoft Edge 都可以理解上述模式。对于 Internet Explorer，您还需要继续使用早期的 ::-ms-clear 元素。

隐藏这些元素后，我们现在可以提供自己的元素：

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

然后我们可以使用 事件委托 来拦截父级 .clear 上的点击事件 <form>:

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

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

您可以在 https://jsfiddle.net/jonathansampson/ety8bx93/ 在线查看 end-result。

在小输入元素中显示 IE ::ms-clear 伪元素？

Display IE ::ms-clear pseudo element in small input elements?

html

css

internet-explorer

pseudo-element