在CSS中输入类型文件+焦点+相邻选择器？

Question

有没有办法在CSS中执行此操作：

span{color:black;}
input[type=file]:focus + span{color:blue;}

它适用于输入[type = text]，它可以在没有“：focus”的情况下工作，但它似乎不像这样工作......

提前谢谢！

Answer 1

简答，否（不是跨浏览器）

这似乎适用于Internet Explorer，但不适用于Firefox。关于Firefox的numerous bugs over the years与input[type=file]和:focus（或javascript事件）组合一起被报告this fiddle example。这似乎也是一个。

请注意this fiddle，如果您点击“浏览”按钮旁边的 文字 ，则可以更改color span，但如果单击按钮则不行。正如您在this fiddle看到的那样，“浏览”按钮元素最终显示在input的“内部”，因此它显然充当了{{1}的“子”元素。就input而言（:focus不会传播到父元素）。然而，特别错误的是:focus有效（通常类似于:active，并且不会传播给父母），如{{3}}中所示。