web-dev-qa-db-ja.com

スタイル入力タイプファイル？

ブラウザの互換性を気にせずにファイルタイプの入力要素をスタイルすることは可能ですか？私の場合、背景画像と丸い境界線（1px）を実装する必要があり、可能であればボタンもカスタマイズする必要があります。

htmlcssfileinputcross-browser
34
Banshee

次の手順に従って、ファイルアップロードフォームのカスタムスタイルを作成できます。

1.）これは単純なHTMLフォームです（以下にここに書いたHTMLコメントを読んでください）

    <form action="#type your action here" method="POST" enctype="multipart/form-data">
    <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
    <!-- this is your file input tag, so i hide it!-->
    <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
    <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
    <input type="submit" value='submit' >
    </form>

2.）次に、この単純なスクリプトを使用して、クリックイベントをファイル入力タグに渡します。

    function getFile(){
        document.getElementById("upfile").click();
    }

デフォルトのスタイルを変更する方法を心配することなく、任意のタイプのスタイルを使用できるようになりました。私はこれを非常によく知っています。なぜなら、1か月半の間デフォルトのスタイルを変更しようとしているからです。ブラウザによってアップロード入力タグが異なるため、非常に難しいと思います。したがって、これを使用してカスタムファイルアップロードフォームを作成します。完全な自動アップロードコードを次に示します。

<html>
<style>
#yourBtn{
   position: relative;
   top: 150px;
   font-family: calibri;
   width: 150px;
   padding: 10px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px dashed #BBB; 
   text-align: center;
   background-color: #DDD;
   cursor:pointer;
  }
</style>
<script type="text/javascript">
 function getFile(){
   document.getElementById("upfile").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
</script>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px; width: 0px;overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>
29
teshguru

Jqueryを介した同じソリューション。ページに複数のファイル入力がある場合に機能します。

$j(".filebutton").click(function() {
    var input = $j(this).next().find('input');
    input.click();
});

$j(".fileinput").change(function(){

    var file = $j(this).val();
    var fileName = file.split("\\");
    var pai =$j(this).parent().parent().prev();
    pai.html(fileName[fileName.length-1]);
    event.preventDefault();
});
8
Iris

一貫したターゲット領域を作成し、好きなようにフェイク要素のスタイルを設定できる、シンプルなCSSのみのソリューションを次に示します。

基本的な考え方は次のとおりです。

  1. 実際のファイル入力の兄弟として、2つの「偽の」要素（テキスト入力/リンク）があります。絶対にターゲットエリアの最上部にくるように配置します。
  2. ファイル入力をdivでラップします。オーバーフローを非表示に設定して（ファイル入力があふれないようにします）、ターゲットエリアに必要なサイズに正確に合わせます。
  3. ファイル入力の不透明度を0に設定すると、ファイルは非表示になりますが、クリックは可能です。ターゲット領域のすべての部分をクリックできるように、大きなフォントサイズを指定します。

Jsfiddleは次のとおりです。 http://jsfiddle.net/gwwar/nFLKU/

<form>
    <input id="faux" type="text" placeholder="Upload a file from your computer" />
    <a href="#" id="browse">Browse </a>
    <div id="wrapper">
        <input id="input" size="100" type="file" />
    </div>
</form>
3
Kerry Liu

Googleで長い間調べ、CSS、JavaScript、JQueryの両方のいくつかのソリューションを試してみたところ、それらのほとんどがボタンとして画像を使用していることがわかりました。それらのいくつかは使いにくいものでしたが、私は何とかして私のためにうまくいったものをつなぎ合わせることができました。

私にとって重要な部分は：

  • [参照]ボタンは（画像ではなく）ボタンである必要がありました。
  • ボタンにはホバー効果が必要です（見た目を良くするため）。
  • テキストとボタンの両方の幅は、簡単に調整できる必要がありました。
  • ソリューションはIE8、FF、ChromeおよびSafariで動作する必要がありました。

これが私が思いついた解決策です。そして、他の人にも役立つことを願っています。

.file_input_textboxの幅を変更して、テキストボックスの幅を変更します。

.file_input_div、.file_input_button、および.file_input_button_hoverの両方の幅を変更して、ボタンの幅を変更します。位置についても少し調整する必要があるかもしれません。理由がわからなかった...

このソリューションをテストするには、新しいhtmlファイルを作成し、コンテンツをそこに貼り付けます。

<html>
<head>

<style type="text/css">

.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div     {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button  {width: 80px;position:absolute;top:0px;
                     border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
                     border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden  {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
                     opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; }
</style>
</head>
<body>
    <input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 <div class="file_input_div">
  <input id="fileInputButton" type="button" value="Browse" class="file_input_button" />
  <input type="file" class="file_input_hidden" 
      onchange="javascript: document.getElementById('fileName').value = this.value" 
      onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';"
      onmouseout="document.getElementById('fileInputButton').className='file_input_button';" />
</div>
</body>
</html>
3
Jonas Mølgaard

クリッププロパティを不透明度、Zインデックス、絶対配置、およびいくつかのブラウザーフィルターと共に使用して、目的のボタンの上にファイル入力を配置します。

http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping

1
Paul Sweatte

つかいます uniform js plugin任意のタイプ、選択、テキストエリアの入力をスタイルします。

URLは http://uniformjs.com/ です

0
Hassaan