CSS :valid :invalid 在 IE 中使用兄弟选择器时表现不同

Question

我有以下代码：

<style>
        input:valid ~ .test {
            border: 1px solid green;
        }

        input:invalid ~ .test {
            border: 1px solid red;
        }

        input:valid {
            border: 1px solid green;
        }

        input:invalid {
            border: 1px solid red;
        }
    </style>

    <input type="text" required />
    <div class="test">test</div>

现在，如果您开始在文本框中键入内容，验证应该修改输入和 "test" div 的边框。这在 Chrome 中有效，但在 IE 中 "test" div 边框更改只有在我单击其他地方时才会触发。

为什么这在 IE 中表现不同？我怎样才能让它正常工作

编辑：patotopeelings 的回答是正确的，但我似乎过于简化了我的问题。

input:valid ~ small .actionEmpty {
            display: block;
        }

        input:invalid ~ small .actionEmpty {
            display: none;
        }

它似乎在显示 css 设置的情况下不起作用，好吧，无效的似乎有效，有效的并不奇怪。 mousedown

上的行为仍然存在

还有什么想法吗？

Answer 1

这看起来与 :empty pseudo class issue with added/removed content and sibling combinators 非常相似（但是这个是针对 + 组合器和 :empty 伪 class）。然而，一个类似的修复是可行的，即在 .test 元素上添加一个无限循环的动画——在你的样式部分的末尾添加这个

input + .test {
    animation: repaint 1000s infinite linear;
}

@keyframes repaint {
    from { opacity: 1; }
    to { opacity: 0.99999; }
}

请注意，我将其从缩放（在链接的问题中）更改为不透明度。

CSS :valid :invalid 在 IE 中使用兄弟选择器时表现不同

CSS :valid :invalid behaves different when using the sibling selector in IE

css

internet-explorer

siblings