web-dev-qa-db-ja.com

カスタムアップロードボタン

こんにちは私はあなたがあなた自身のカスタムファイルアップロードボタンをどのように作成できるのかと思っていました、私ができる最高のことは

enter image description here

そして私が達成したいのは

enter image description here

とにかくこれを行う方法がある場合、私は非常に感謝します、そしてあなたがボタンまたはそのようなものをダウンロードすることを可能にするウェブサイトへのリンクではなく、コードでそれを行う方法を説明する答えをもらえますか、ありがとう:)

javascriptupload
16
daka

これらの答えのいくつかは、期待どおりに動作するように見えるものを作成しますが、期待どおりに実行しようとすると失敗します。ファイル入力は直接スタイルが適切ではなく、試すのに問題があります。ただし、トリックがあります。

秘訣は、入力の不透明度を0に変えてから、その下の背景を必要なボタンスタイルに変更することです。

.file_button_container,
.file_button_container input {
     height: 47px;
     width: 263px;
 }

 .file_button_container {
     background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;
 }

 .file_button_container input {
     opacity: 0;
 }
<div class="file_button_container"><input type="file" /></div>
32
natedavisolds

この方法で試すこともできると思います。
追加の作成<label for="X"></label>CSSで簡単にスタイリングできる要素

<div class="container">
  <label for="upload" class="uploadButton">Upload</label>
  <input type="file" name="upload" id="upload">
</div>

お気に入り

.container {
  position: relative;
}
.uploadButton {
  height: 25px;
  width: 66px;
  display: block;
  cursor: pointer;
  background: url('http://www.ifunia.com/images/christmas/youtube-upload-button.gif') center center no-repeat;
}
input[type="file"] {
  display: block;
  width: 66px;
  height: 25px;
  clip: rect(0px 0px 0px 0px);
  position: absolute;
  left: 0;
  top: 0;
}
<form>
  <div class="container">
    <label for="upload" class="uploadButton"></label>
    <input type="file" name="upload" id="upload" required />
  </div>
  <hr/>
  <button type="submit">Submit</button>
</form>
21
Alexandru Bangală

CSSを使用して、IDまたはクラスでボタンのスタイルを設定します。

これは役立つかもしれません： http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

1
Sam

矢印は「コードだけでできる」ものではなく、Firefoxでは角の丸みがうまく機能しますが、cssを使用する場合は機能しません...カスタム画像を使用する必要がある場合は簡単です。

css：

#my_upload_button{
  background-image:url(path-to-file.png);
  border:none;
}
1
Trey

これがcss/htmlで必要なボタンの概算です

html

<button class="upload">Choose a file to upload...</button>

css

.upload{
    border:0;
    padding:10px 20px;
    -moz-border-radius:10px;
    border-radius:10px;
    background-color:#4488ee;
    color:white;
    font-size:16px;
}

デモ http://jsfiddle.net/gaby/qdX5d/2/

IE9より前の丸い角の場合 css3pie

1
Gabriele Petrioli

私は答えるには遅すぎますが、誰かがこれが将来役立つと確信しています。JavascriptやHiddenフィールドも使用する必要はありません。 Bootstrapを使用している場合は、btnCSSも必要ありません。

#upload_file 
{
    display: none;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.btn {
    -moz-user-select: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    white-space: nowrap;
}
<label for="upload_file" class="custom-file-upload btn btn-primary"><i class="fa fa-cloud-upload"></i> File Upload</label>
<input class="margin" type="file" formnovalidate id="upload_file" name="file" accept="*">
0
Anup Yadav

入力のラベルをカスタムアップロードボタンとして使用します。

<label for="pic" class="uploadfilelabel" >upload </label>
<input type="hidden" name="MAX_FILE_SIZE" value="110000">
<input id="pic" name="pic" type="file" size="110000">

およびCSS：

 label.uploadfilelabel{/*custom label here*/}
 input[type=file]{display:none;}

メイン入力ボタンを表示しなかったことに注意してください。表示しないとスペースを占有します

0
Ormoz

ステップ1.シンプルなHTMLマークアップを作成する

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

ステップ2.CSS：トリッキーな部分

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

デモについては、こちらをご覧ください http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

0
Alex