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>

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

为什么这在 IE 中表现不同？以及如何使其正常工作

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

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 伪类的）。然而，一个类似的修复方法会起作用，即在 .test 元素上添加一个无限循环的动画 - 在样式部分的末尾添加它

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

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

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