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

Webkit输入文件，隐藏transform：translateX上的标签

1 个答案: