入力type="file"ボタンのスタイルをどのように設定しますか？

ほとんどのブラウザーは、CSSまたはJavaScriptのどちらからも外観を変更しないため、ファイル入力のスタイル設定は難しいことで有名です。

入力のサイズでさえ、以下のようなものには応答しません：

<input type="file" style="width:200px">

代わりに、サイズ属性を使用する必要があります。

<input type="file" size="60" />

それよりも洗練されたスタイル設定（たとえば、参照ボタンの外観の変更）の場合は、ネイティブファイル入力の上にスタイル付きボタンと入力ボックスをオーバーレイするトリッキーなアプローチを検討する必要があります。www.quirksmode.org/dom/inputfile.htmlでrmによってすでに言及されている記事は、私が見た中で最高のものです。

更新

<input>タグを直接スタイルするのは難しいですが、これはタグを使用して簡単に行うことができます<label>。@JoshCrozierから以下の回答を参照してください：https ://stackoverflow.com/a/25825731/10128619

これにはJavaScriptは必要ありません。ここにクロスブラウザソリューションがあります：

この例を見てください！-Chrome / FF / IEで動作します-（IE10 / 9/8/7）

最善の方法はfor、非表示のファイル入力要素に属性が関連付けられたカスタムラベル要素を用意することです。（これが機能するためにはfor、ラベルの属性がファイル要素の属性と一致している必要がありますid）。

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

別の方法として、ファイル入力要素をラベルで直接ラップすることもできます：（例）

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

スタイリングの点で、単に隠す¹使って入力要素属性セレクタ。

input[type="file"] {
    display: none;
}

次に、カスタムlabel要素のスタイルを設定するだけです。（例）。

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

^1-を使用して要素を非表示display: noneにすると、IE8以下では機能しないことに注意してください。また、jQuery検証はデフォルトでは非表示フィールドを検証しないことにも注意してください。それらのもののいずれかがあなたのために問題がある場合は、ここで入力（非表示にするには、二つの異なる方法です1、2）このような状況でその仕事は。

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

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か月半の間デフォルトのスタイルを変更しようとしているので、私はこれをよく知っています。私を信じてください。ブラウザーによってアップロードの入力タグが異なるため、それは非常に困難です。これを使用して、カスタムファイルアップロードフォームを作成します。これが完全な自動アップロードコードです。

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();
}

#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;
}

<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>

CSSで非表示にし、$（selector）.click（）でカスタムボタンを使用して、参照ボタンをアクティブにします。次に、ファイル入力タイプの値をチェックする間隔を設定します。間隔はユーザーの値を表示できるため、ユーザーは何がアップロードされているかを確認できます。フォームが送信されると、間隔はクリアされます[編集]すみません、忙しいので、この投稿を更新する必要がありました。ここに例を示します

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

フィドル： http //jsfiddle.net/M7BXC/

通常のJavaScriptではjQueryがなくても目標を達成できます。

これで、newBtnはhtml_btnにリンクされ、新しいbtnを好きなようにスタイルできます：D

<input type="file">が作成されると、すべてのレンダリングエンジンが自動的にボタンを生成します。歴史的に、そのボタンは完全にスタイルを変えることができませんでした。ただし、TridentとWebKitには、疑似要素によるフックが追加されています。

トライデント

IE10以降、ファイル入力ボタンは、::-ms-browse疑似要素を使用してスタイルを設定できます。基本的に、通常のボタンに適用するCSSルールはすべて、疑似要素に適用できます。例えば：

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

これは、Windows 8のIE10では次のように表示されます。

WebKit

WebKitは、::-webkit-file-upload-button疑似要素を持つファイル入力ボタンのフックを提供します。繰り返しになりますが、ほとんどすべてのCSSルールを適用できるため、トライデントの例もここで機能します。

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

これは、OS X上のChrome 26では次のように表示されます。

Bootstrap 3を使用している場合、これは私にとってうまくいきました：

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/を参照してください

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

これにより、次のファイル入力ボタンが生成されます。

真剣に、http： //www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/をチェックしてください。

ネイティブのドラッグアンドドロップサポートを使用したここでの作業例：https : //jsfiddle.net/j40xvkb3/

ファイル入力のスタイルを設定するときは、入力が提供するネイティブの相互作用を中断しないでください。

このdisplay: noneアプローチは、ネイティブのドラッグアンドドロップサポートを壊します。

何も壊さないようにするには、 opacity: 0するには、入力にアプローチをし、ラッパーで相対/絶対パターンを使用して配置する必要があります。

この手法を使用すると、ユーザーのクリック/ドロップゾーンのスタイルを簡単に設定でき、JavaScriptのdragenterイベントにカスタムクラスを追加してスタイルを更新し、ファイルをドロップできることをユーザーに知らせるフィードバックをユーザーに提供できます。

HTML：

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS：

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

これは実際の例です（処理する追加のJSを使用） dragoverイベントとドロップされたファイル使用）。

https://jsfiddle.net/j40xvkb3/

これが役に立てば幸い！

以下のコードを使用して、純粋なCSSでそれを行うことができます。私はブートストラップとfont-awesomeを使用しました。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>

 <label>
    <input type="file" />
 </label>

入力のラベルの内側に入力type = "file"をラップできます。必要に応じてラベルのスタイルを設定し、ディスプレイで入力を非表示にします。

これは、実際には<input type="file" />要素をスタイルせず、代わり<input type="file" />に他の要素（スタイル可能）の上に要素を使用するソリューションです。この<input type="file" />要素は実際には表示されないため、全体的な錯覚は、適切にスタイル設定されたファイルアップロードコントロールのものです。

私は最近この問題に遭遇しましたが、Stack Overflowでの大量の回答にもかかわらず、実際にその要件を満たすものはありませんでした。結局、私はこれをカスタマイズして、シンプルでエレガントなソリューションを実現しました。

私はこれをFirefox、IE（11、10、9）、ChromeとOpera、iPad、いくつかのAndroidデバイスでもテストしました。

これがJSFiddleリンクです-> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});

body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

お役に立てれば！！！

これはjqueryを使用すると簡単です。ライアンのコード例を示すわずかな変更を加えたの提案の示します。

基本的なHTML：

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

準備ができたら、必ず入力にスタイルを設定してください：opacity: 0 設定できませんdisplay: none。クリック可能にする必要があるため、。ただし、「新規」ボタンの下に配置したり、必要に応じてz-indexを使用して他の何かの下に挿入したりできます。

画像をクリックしたときに実際の入力をクリックするようにjqueryを設定します。

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

これでボタンが機能しました。値が変更されたら、値を切り取って貼り付けるだけです。

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

ターダー！val（）をより意味のあるものに解析する必要があるかもしれませんが、すべて設定する必要があります。

アップロードファイルボタンを素敵なボタンまたは要素の上に置き、非表示にします。

非常にシンプルで、どのブラウザでも機能します

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

スタイル

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

可視性：隠されたトリック

私は通常visibility:hiddenトリックに行きます

これは私のスタイルのボタンです

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

これは入力type = fileボタンです。visibility:hiddenルールに注意

<input type="file" id="upload" style="visibility:hidden;">

これは、それらを結合するJavaScriptビットです。できます

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

私が考えることができる唯一の方法は、それがレンダリングされた後にJavaScriptでボタンを見つけてそれにスタイルを割り当てることです

あなたもこの記事を見るかもしれません

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

私は通常、単純なjavascriptを使用してファイル入力タグをカスタマイズします。非表示の入力フィールドは、ボタンをクリックするだけで、javascriptが非表示のフィールドを呼び出します。CSSまたはjqueryの束がない簡単なソリューションです。

<button id="file" onclick="$('#file').click()">Upload File</button>

ここでは、スパンを使用してファイルタイプの入力をトリガーし、そのスパンを単にカスタマイズしました。、ので、この方法を使用してスタイルを追加できます。

visibility：hiddenオプションでinputタグを使用し、それをスパンでトリガーすることに注意してください。

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}

<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

参照

これは、マテリアル/角度ファイルのアップロードでそれを行うための良い方法です。ブートストラップボタンでも同じことができます。

これの<a>代わりに使用したことに注意してください<button>。

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>

CSSのみ

この非常に使いシンプルかつEASYを

HTML：

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

CSS：

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}

多分多くの日除け。しかし、私はfaボタンのある純粋なCSSでこれが好きです：

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}

<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

フィドル：https : //jsfiddle.net/zoutepopcorn/v2zkbpay/1/

実際に非常にブラウザ固有であるか、実際のボタンの上にスタイル付きボタンをオーバーレイ<label>する<button>、またはの代わりにやその他のそのようなハックを使用するよう強制する「偉大な」CSSのみのソリューションにだまされないでください。。JavaScriptは、一般的な使用のために動作させるために必要です。信じられないのなら、gmailとDropZoneがどのようにそれをするか研究してください。

通常のボタンを必要に応じてスタイル設定してから、単純なJS関数を呼び出して、非表示の入力要素を作成し、スタイル設定したボタンにリンクします。

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

上記のコードが、ユーザーがファイルを選択するたびに再リンクすることに注意してください。「onchange」はユーザーがファイル名を変更した場合にのみ呼び出されるため、これは重要です。しかし、おそらくユーザーがファイルを提供するたびにファイルを取得したいでしょう。

ファイル名を変換した複数ファイルのソリューション

ブートストラップの例

HTML：

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. jQueryを使用したJS：

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. jQueryなしのJS

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

これは解決策であり、選択したファイル名も表示されます。http： //jsfiddle.net/raft9pg0/1/

HTML：

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS：

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS：

input[type="file"] {
    display: none;
}

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }

今週は、ボタンをカスタマイズして、選択したファイル名を横に表示する必要もあったため、上記の回答の一部を読んだ後（BTWに感謝）、次の実装を思いつきました。

HTML：

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

Javascript（角度）

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

基本的に私はng-file-upload libを使用しています。Angular-wise私はファイル名を$ scopeにバインドし、それに「No file selected」の初期値を与えています。また、onFileSelect（）関数もバインドしています。私のスコープなので、ファイルが選択されると、ng-upload APIを使用してファイル名を取得し、それを$ scope.filenameに割り当てます。

スタイリングされたをクリックするとき<input>にtrigger()関数を使用して、クリックをシミュレートするだけ<div>です。から独自のボタンを作成し、をクリックすると、<div>のクリックがトリガーされましinputた<div>。これは、ボタン<div>であり、ファイルのクリックをシミュレートするため、必要に応じてボタンを作成できます<input>。次に、で使用display: noneします<input>。

// div styled as my load file button
<div id="simClick">Load from backup</div>

<input type="file" id="readFile" />

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});

最善の方法は、疑似要素：afterまたは：beforeを入力の明白な要素として使用することです。次に、その疑似要素を必要に応じてスタイル設定します。次のように、すべての入力ファイルの一般的なスタイルとして実行することをお勧めします。

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}

私が見つけた最良の方法は、input type: fileそれをに設定することdisplay: noneです。それを与えidます。ファイル入力を開くボタンまたはその他の要素を作成します。

次に、クリックしたときに元のファイル入力のクリックをシミュレートするイベントリスナーを追加します（ボタン）。helloという名前のボタンをクリックするのと同じですが、ファイルウィンドウが開きます。

コード例

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

JavaScript

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })

cssはここで多くのことができます...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

::リファレンス:: http://site-o-matic.net/?viewpost=19

-修道院

ファイルボタンを画像に切り替える非常に簡単な方法を見つけました。画像にラベルを付け、ファイルボタンの上に配置するだけです。

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

ラベル付けされた画像をクリックすると、ファイルボタンを選択します。

このアプローチだけが全体の柔軟性をもたらします！ES6 / VanillaJS！

html：

<input type="file" style="display:none;"></input>
<button>Upload file</button>

javascript：

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

これにより、入力ファイルボタンは非表示になりますが、内部では別の通常のボタンからクリックするため、他のボタンと同様にスタイルを設定できます。これは、役に立たないDOMノード以外に欠点がない唯一のソリューションです。おかげdisplay:none;で、入力ボタンはDOM内の可視スペースを予約しません。

（私はこれのために誰に小道具を与えるべきかもう知りません。しかし、私はここStackoverflowのどこかからその考えを得ました。）