1

フォームにファイル フィールドがあります。そのフィールドはとても奇妙に見えます。だから私はそれをイメージにしたい。画像をクリックすると、ファイルフィールドが開きます（ファイルを選択してください）。

最善の解決策を教えてください。すべてのブラウザをサポート。

4

2 に答える 2

1

これはすべきです：

HTMLコード

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSS スタイル

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}
于 2013-08-19T17:25:39.237 に答える
0

フィールドを透明にし、overflow:hidden と画像を背景として div 内に配置します。

<div style="width:16px;height:16px;overflow:hidden">
  <input type="file" name="file" style="opacity:0;filter:alpha(opacity=0)">
</div>

画像がフィールドのデフォルト サイズよりも大きい場合は、カーソル位置に応じてフィールドを移動する JS も作成する必要があるため、それを避けるようにしてください。

于 2013-08-19T17:28:18.947 に答える