Webkitの入力ファイルで、トランスフォームのラベルが表示されません：translateX

Question

-webkit-transform: translateX(0%)を親コンテナに使用すると、Chromeの標準<input type="file">要素のファイル名「label」テキストが消えます。 Safariでは、テキストも隠されていますが、ファイル選択時にファイルのアイコンが表示されます。

http://jsfiddle.net/9sZxv/

単に一のようなクラスの追加と削除：で、親のdivに

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

：場合

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

、テキストNo file chosen、またはファイル名を引き起こしますファイルが選択されて消えます。 Win7のwith-テスト済み

：クローム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