Question

When using -webkit-transform: translateX(0%) on a parent container the file name “label” text disappears from the standard <input type="file"> element in Chrome. In Safari the text is also hidden but upon file selection the icon for the file is displayed.

http://jsfiddle.net/9sZxv/

Merely adding and removing a class such as:

.transX
{
    -webkit-transform: translateX(0%);
}​

To the parent div in:

<div id="test1">
    <input type="file">
</div>

Will cause the text No file chosen, or the file name if a file is selected to disappear.

Tested with- Win7: Chrome 19 and Safari 5.1

Is there a fix or workaround? The file select element isn’t friendly to CSS styling and there isn’t any element to reference just the text part directly so I am at a lost on how to approach this issue.

Answer 1

If you apply a zoom to the input box in Chrome you can see that it is moving the text underneath:

http://jsfiddle.net/9sZxv/4/

This is definitely a hack, but you can move the file input button down to the same level as the text with this css:

.transX input::-webkit-file-upload-button {
    -webkit-transform: translateY(26px);
}

And then set the file input to have a negative top to make it look normal.

.transX
{
    position: relative;
    overflow: hidden;
    height: 22px;
    -webkit-transform: translateX(20px);
}

.transX input
{
    padding-bottom: 26px;
    top: -26px;
    position: absolute;
}

Here’s an example: http://jsfiddle.net/9sZxv/2/

If that doesn’t work, you could try making your own file input using the opacity trick described here: http://www.quirksmode.org/dom/inputfile.html