Home/ Questions/Q 6874589
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T04:12:49+00:00

Using the following code, I am unable to capitalise a label that directly follows

  • 0

Using the following code, I am unable to capitalise a label that directly follows a file input field in 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>

Error reproduced:

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

A way to resolve this is to move the second label onto its own line (see: http://jsfiddle.net/Nc27q/1/ ) within the HTML or even placing a space in between the HTML tags.

The second label is added using Javascript (as an error message) which is why it is not placed on another line.

Does anybody know why chrome does this and how I can get around it in a CSS only way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It does indeed look like a bug. It’s like it’s seeing the file input in front of the text and treating that as part of the word, so not seeing the “r” in “required” as the first character in need of capitalization.

    Adding

    label:before {
    content: " ";
}

    to force the space seems to work: http://jsfiddle.net/Nc27q/4/ Since this is a Chrome-specific issue, you don’t have to worry about pseudo-elements not being supported… (Of course, you may want to target it a bit more tightly than I have above.)

    • 0