CSS :valid :invalid behaves different when using the sibling selector in 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>

现在如果你开始在文本框中输入，验证应该修改输入和“测试”div 的边框。这在 Chrome 中有效，但是在 IE 中，“测试”div 边框更改仅在我单击其他地方时才会触发。

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

编辑:potatopeelings 的答案是正确的，但似乎我把我的问题简化了太多。

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

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

它似乎在显示 css 设置的情况下不起作用，无效的似乎有效，有效的并不奇怪。鼠标按下时的行为仍然存在

还有更多想法吗？

Answer 1

这似乎与 :empty pseudo class issue with added/removed content and sibling combinators 非常相似(然而，这个是针对 + 组合器和 :empty 伪类的)。但是，类似的修复可以工作，即在 .test 元素上添加无限循环动画 - 在样式部分的末尾添加

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

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

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