Webkit input file, hides label on transform: translateX
When used -webkit-transform: translateX(0%)
in a parent container, the text file "label" disappears from the standard element <input type="file">
in Chrome. In Safari, the text is also hidden, but when you select a file, an icon for the file is displayed.
Simple class addition and removal, for example:
.transX
{
-webkit-transform: translateX(0%);
}
For the parent div in:
<div id="test1">
<input type="file">
</div>
Will call text No file chosen
or filename if file is selected to fade.
Tested with Win7: Chrome 19 and Safari 5.1
Is there a fix or workaround? The file selector is not CSS style friendly, and there is no element that links only a portion of the text directly, so I am losing information on how to approach this issue.
source to share
If you apply a scale to the input box in Chrome, you'll see that it moves the text under:
This is definitely a hack, but you can move the file enter button to the same level as text with this css:
.transX input::-webkit-file-upload-button {
-webkit-transform: translateY(26px);
}
And then set the file input to negative top so that it looks ok.
.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 can try creating your own file using the opaque trick described here: http://www.quirksmode.org/dom/inputfile.html
source to share