css - 参照ボタンをカスタマイズするにはどうすればよいですか？

Question

アップロードファイルフィールドの参照ボタンをカスタマイズしたい（背景や色などを変更したい）。

<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13">

Answer 1

できません。独自のボタンを作成して、実際の入力をトリガーする必要があります。

ここでは、jQueryを使用してこれを行うことができます。実例を参照してください。

HTML：

<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Upload File</div>

jQuery：

$("#uploadTrigger").click(function(){
   $("#uploadFile").click();
});

CSS：

.hidden {
    display:none;
}
.button {
    border: 1px solid #333;
    padding: 10px;
    margin: 5px;
    background: #777;
    color: #fff;
    width:75px;
}

.button:hover {
    background: #333;
    cursor: pointer;
}

Answer 2

ファイル入力ボタンのスタイル設定の背後にある基本的な前提は、ファイルのアップロードに絶対位置のコントロールをオーバーレイすることです。ファイルアップロードの不透明度が0に設定されているため、表示されません。そのz-indexはオーバーレイされたコントロールの上に設定され、コントロールのz-indexはファイルのアップロードよりも低く設定されます。したがって、ユーザーがオーバーレイされたコントロールをクリックしていると思った場合、実際には不透明度を0に設定してファイルのアップロードをクリックしています。

これは本当に大まかな例です：

HTML

<div id="file-upload-cont">
    <input id="original" type="file"/>
    <div id="my-button">Find</div>
    <input id="overlay"/>
</div>

CSS

#my-button{
    position: absolute;
    border: 1px solid black;
    background: green;
    padding 3px;
    width: 50px;
    height: 25px;
    text-align: center;
    left: 148px;  /* Positioning over file-upload */
    top: 0px;
    z-index: 1; /* Lower z-index causes controls to sit under file upload */
}

#overlay{
 position: absolute;
 z-index: 1; /* Lower z-index causes controls to sit under file upload */
 left: 0; /* Positioning over file-upload */
}

#original{
    opacity: 0; /* Opacity makes it invisible*/
    position: relative;
    z-index: 100; /* z-index causes original file upload to sit above other controls*/
}

#file-upload-cont{
    position: relative;
}

実例 http://jsfiddle.net/tP8KY/1/

Answer 3

参照ボタンを直接カスタマイズすることはできません。CSSは機能しません。

できることは、左側にテキストボックスがあるボタンを作成することです。それをカスタマイズし、クリックすると、元のファイルのアップロードをトリガーします。

このリンクとこれを参照してください

Answer 4

参照ボタンの変更については、以下を確認してください。

1. 参照ボタンcss
2. ボタンのデザインを参照

これらのリンクがお役に立てば幸いです。