Webkit 输入文件，隐藏转换上的标签:translateX

Question

在父容器上使用-webkit-transform: translateX(0%)时，文件名"label"文本会从Chrome的标准<input type="file">元素中消失。在Safari中，文本也被隐藏，但在选择文件后，将显示文件的图标。

http://jsfiddle.net/9sZxv/

仅添加和删除类，例如：

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

致父div 在：

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

将导致文本No file chosen或文件名（如果选择了文件）消失。

测试- Win7：Chrome 19和Safari 5.1

是否有修复或解决方法？文件选择元素对 CSS 样式不友好，并且没有任何元素可以直接引用文本部分，所以我对如何处理这个问题感到困惑。

Answer 1

如果您在 Chrome 中对输入框应用缩放，您可以看到它正在移动下面的文本：

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

这绝对是一个黑客，但您可以使用此 css 将文件输入按钮向下移动到与文本相同的级别：

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

然后将文件输入设置为具有负顶部以使其看起来正常。

.transX
{
    position: relative;
    overflow: hidden;
    height: 22px;
    -webkit-transform: translateX(20px);
}
.transX input
{
    padding-bottom: 26px;
    top: -26px;
    position: absolute;
}

下面是一个示例：http://jsfiddle.net/9sZxv/2/

如果这不起作用，您可以尝试使用此处描述的不透明度技巧制作自己的文件输入：http://www.quirksmode.org/dom/inputfile.html