asp.net - ブラウザボタンをFileUploadコントロールの画像に置き換えるにはどうすればよいですか？

Question

次のように、ページにFileUploadコントロールがあります。デフォルトで[参照...]ボタンがあります。画像をカスタマイズしたImageButtonに置き換えたいと思います。誰かがこれを達成する方法を教えてもらえますか？

<td width="40%" valign="top" align="center">
                <asp:FileUpload ID="FileUpload1" runat="server" />
</td>

Answer 1

Michael Leanosの答えのように、しかし私は変更を加えました:

<style type="text/css">
    .file-upload 
    {
        cursor: pointer;      
    }

    .file-upload input 
    {
        /* the same icon width/heght */
        width:70px;
        height:70px;
        /* a z-index higher than the icon */
        z-index:999;
        /* less opcacity as possible */
        opacity: 0.01;        
        filter: alpha(opacity=0);
    }
</style>

/* アイコンの不透明度を可能な限り高くし、z-index を低くします */

<label class="file-upload">
    <asp:FileUpload ID="up_Allegato" runat="server" type="file" accept="image/*" _capture="camera" Style="position: absolute; right: 100px; top: 150px; height: 70px; line-height: 19px;" />
    <asp:ImageButton ID="bt_Photo" runat="server" Visible="true" ImageUrl="images/action_edit24 x 200.png" OnClientClick="return false;" Style="position: absolute; right: 100px; top: 150px; height: 70px; line-height: 19px;z-index:6 ;opacity:100"/>
 </label>