Question

我有几个日期和文本的输入元素。如果它们的宽度大于94px，那么＆＃34; X＆＃34; :: - 显示ms-clear但我的一些输入较小。

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

Answer 1

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

::-ms-clear { display: none }

但是，这不会禁用其他浏览器中的自定义清除按钮，例如Google Chrome。在Chrome中，您需要定位一个不同的伪元素：

::-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/在线查看最终结果。

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

1 个答案: