Chrome bug？在文件输入后无法大写标签

Question

使用以下代码，我无法大写直接跟在chrome中的文件输入字段的标签：

CSS

label {
    text-transform: capitalize;    
}

HTML

<label for="book-file">file</label>
<input type="file" name="a_file" id="a_file"><label for="a_file">required</label>

错误转载：

JSFiddle：http://jsfiddle.net/Nc27q/

解决此问题的一种方法是将第二个标签移动到HTML中自己的行（请参阅：http://jsfiddle.net/Nc27q/1/ ），甚至在HTML标记之间放置一个空格。

使用Javascript（作为错误消息）添加第二个标签，这就是为什么它没有放在另一条线上。

有人知道为什么chrome会这样做以及如何以CSS方式绕过它？

Answer 1

它确实看起来像一个bug。这就像它在文本前面看到文件输入并将其视为单词的一部分，因此不要将“必需”中的“r”视为需要大写的第一个字符。

添加

label:before {
    content: " ";
}

强制空间似乎有效：http://jsfiddle.net/Nc27q/4/由于这是特定于Chrome的问题，因此您不必担心不支持伪元素...（当然，您可能希望比我上面的目标更紧密。）

Answer 2

我猜这是由于Chrome检测到什么是大写以及什么不是大写的原因。您的代码中没有任何空格，因此它只是说file<input>required。 Chrome的逻辑可能会确定这是一个单词（或句子），导致它故意忽略它。

您可以改为使用label:first-letter { text-transform: uppercase; }。

Answer 3

text-transform属性没有大写作为其关键字值之一;你想要大写。它有效，请在此处查看：http://jsfiddle.net/jalbertbowdenii/Nc27q/2/