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：Chrome19およびSafari5.1

修正または回避策はありますか？file select要素はCSSのスタイル設定に適していないため、テキスト部分だけを直接参照する要素がないため、この問題に取り組む方法がわかりません。

4

1 に答える 1

2

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-26T19:50:37.987 に答える