3

-webkit-transform: translateX(0%)在父容器上使用时，文件名“标签”文本从<input type="file">Chrome 的标准元素中消失。在 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 样式不友好，并且没有任何元素可以直接引用文本部分，所以我不知道如何解决这个问题。

4

1 回答 1

2

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

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

这绝对是一个 hack，但您可以使用此 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

于 2012-04-26T19:50:37.987 回答