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>

现在如果你开始在文本框中输入，验证应该修改输入和＆＃34;测试＆＃34;的边界。 DIV。这适用于Chrome，但在IE中，＆＃34; test＆＃34;只有在我点击其他地方时才会触发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非常相似（但是这个用于+ combinator和：empty伪类）。但是，类似的修复工作也可以，即在.test元素上添加无限循环动画 - 在样式部分的末尾添加它

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

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

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

CSS：有效：在IE中使用兄弟选择器时，无效行为不同

1 个答案: