3

入力ファイルを次のように設計します。

 <input type="file" name="file" id="file" size="52"   />

ここに画像の説明を入力してください

「参照」ボタンの文字と色を変更したい。手伝って頂けますか？皆さんありがとう。

4

5 に答える 5

4

外観と機能は問題ありませんが、これは実際に期待されるものではありません。これはあなたの助けになると思います。

 <input type="text" id="fileName" readonly="readonly" >
 <div class="file_input_div" style="display: inline;">
 <input type="button" id="button" value="Open"/>
 <input type="file"  style="opacity:0; position:relative; left:-40px;"  onchange="javascript: document.getElementById ('fileName') . value = this.value"/>
 </div>

CSS

​#button{
position: relative;
left:-1px;
background-color:#446655;
}​

デモ

于 2012-09-25T09:05:02.883 に答える
0

これはブラウザのアーキテクチャとOSに依存する機能であり、変更することはできません。

オーバーレイの使用

ただし、この上に他の要素をオーバーレイして、デフォルトの外観を非表示にすることができます。また、これを行ういくつかのプラグインを使用することもできます。

jQuery File Uploadは、それを実行できるそのようなプラグインの1つです。

デモ： http： //blueimp.github.com/jQuery-File-Upload/

于 2012-09-25T08:15:08.593 に答える
0

ブラウザのアーキテクチャに依存します。あなたはそれについて多くをすることはできません。

まだstackoverflowでこれについていくつかの議論があります

これをチェックする必要があります

<input type ="file"/>のボタンテキストを変更する方法をご覧ください。

お役に立てれば

PS：次回から、重複した質問を投稿していないことを確認してください

于 2012-09-25T08:22:23.637 に答える
0

これを試してください： https ：//codepen.io/claviska/pen/vAgmd

<div class="input-group">
            <label class="input-group-btn">
                <span class="btn btn-primary">
                    Browse&hellip; <input type="file" style="display: none;" multiple>
                </span>
            </label>
            <input type="text" class="form-control" readonly>
        </div>



$(function() {
 $(document).on('change', ':file', function() {
var input = $(this),
    numFiles = input.get(0).files ? input.get(0).files.length : 1,
    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});

 // We can watch for our custom `fileselect` event like this
$(document).ready( function() {
  $(':file').on('fileselect', function(event, numFiles, label) {

      var input = $(this).parents('.input-group').find(':text'),
          log = numFiles > 1 ? numFiles + ' files selected' : label;

      if( input.length ) {
          input.val(log);
      } else {
          if( log ) alert(log);
      }

  });
});

});
于 2018-05-25T12:18:34.017 に答える
-1

ここで見つけることができます：
http
：//www.quirksmode.org/dom/inputfile.html 投稿が長すぎてここにコピーできません。

基本的に、input[type=text]（ユーザーに表示される）スタイリストを作成し、のinput[type=file] opacity = 0上にを配置しinput[type=text]ます。

これがお役に立てば幸いです。

Webkitブラウザーの場合のみ、CSS属性を使用-webkit-appearanceしてデフォルトのスタイルをクリアし、最初からスタイリストを開始できます。

于 2012-09-25T08:22:00.497 に答える