Webkit輸入文件，在變換上隱藏標籤：translateX

在父容器上使用-webkit-transform: translateX(0%)時，文件名「label」文本將從Chrome中的標準<input type="file">元素中消失。在Safari中，文本也是隱藏的，但是在文件選擇時會顯示文件的圖標。Webkit輸入文件，在變換上隱藏標籤：translateX

http://jsfiddle.net/9sZxv/

僅僅添加和刪除的一類，如：

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

在父DIV：

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

將導致文本No file chosen，或部分文件名，如果文件被選中消失。

測試與 - Win7的：鉻19和Safari 5.1

是否有修補程序或解決方法嗎？文件選擇元素對CSS樣式不友好，並且沒有任何元素可以直接引用文本部分，所以我對如何解決這個問題感到迷茫。

來源

2012-04-09 WSkid

不是一個解決方案，但有趣如何當應用到body標籤時不會中斷：http://jsfiddle.net/9sZxv/1/看起來像一些繼承問題，但我似乎無法破解它。 – mikevoermans 2012-04-09 22:21:21

@mikevoermans確實有點幫助，這個webapp使用轉換來模擬一個移動應用程序，並且在轉換完成後它會留下幾個屬性。我可能不得不考慮在轉換完成時爲「更清潔」工作。 – WSkid 2012-04-09 23:35:53

如果您在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

來源

2012-04-26 19:50:37

謝謝！每一個說法都不是一個解決方案，但至少知道發生了什麼是第一步。 – WSkid 2012-04-26 23:04:43

Webkit輸入文件，在變換上隱藏標籤：translateX

回答

相關問題