Хром баг? Невозможно использовать заглавную букву после ввода файла

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/

Чтобы решить эту проблему, переместите вторую метку на собственную строку ( см .: http://jsfiddle.net/Nc27q/1/) внутри HTML или даже поместите пробел между тегами HTML.

Вторая метка добавляется с использованием Javascript (как сообщение об ошибке), поэтому она не помещается в другую строку.

Кто-нибудь знает, почему Chrome делает это и как я могу обойти это только CSS-способом?

Answer 1

Это действительно похоже на ошибку.Это похоже на то, что он видит ввод файла перед текстом и рассматривает его как часть слова, поэтому не видит «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/