Question

嗨，我只是想知道如何创建自己的自定义文件上传按钮，因为我能做的最好的是

enter image description here

我想要实现的是

enter image description here

如果无论如何这样做我会非常感激，并且我可以获得解释如何使用代码而不是答案的解答，以及允许您下载按钮或类似内容的网站链接，谢谢：）

Answer 1

虽然这些答案中的一些会产生看起来像你希望它起作用的东西，但是当它们试图按照你期望的方式运行时它们会崩溃。文件输入的样式不直接，您将无法尝试。但是，有一个技巧。

诀窍是将输入的不透明度变为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>

Answer 2

我认为您也可以尝试这样做：
创建一个额外的<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>

Answer 3

使用CSS按其ID或类设置按钮的样式。

这可能会有所帮助： http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

Answer 4

箭头不是你可以“只使用代码”而且圆角在firefox中可以正常工作，但不是在使用css ......如果你只需要使用自定义图像就很容易：

的CSS：

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

Answer 5

以下是使用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;
}

demo http://jsfiddle.net/gaby/qdX5d/2/

对于IE9之前的圆角，

使用css3pie

Answer 6

在 Vue JS 中如果你想把上传图片按钮放在 textarea 中使用相对和绝对位置将相机图标放在文本区域内使用bottom-3 right-4找到合适的位置

<div class="field relative">
        <label>Description</label>
        <textarea class="textarea" v-model="description" type="text" maxlength="10000"> </textarea>
        <label for="upload-file" class="icn icn-camera cursor-pointer absolute bottom-3 right-4">
          <input type="file" id="upload-file" hidden ref="file" @change="getImage($event)" accept="image/**" />
        </label>
  </div>

如果不在 textarea 框内，只需一个自定义上传按钮，然后保持这样的代码

 <label for="upload-file" class="icn icn-camera cursor-pointer">
      <input type="file" id="upload-file" hidden ref="file" @change="getImage($event)" accept="image/**" />
    </label>

将默认上传文件图标更改为相机图标

Answer 7

步骤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/

Answer 8

将输入标签用作自定义上传按钮：

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

请注意，我们没有显示主输入按钮，否则会占用空间

Answer 9

我来不及回答，但将来肯定会发现这个有用，不需要使用Javascript或Hidden字段。如果您使用的是Bootstrap，那么肯定也不需要btn CSS。

#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="*">

自定义上传按钮

9 个答案: