Html 你如何用Zurb基金会形成文件字段？ 我试图用Zurb基金会创建一个按钮，使用Rails来上传图片。我试过这个： <input class="tiny round disabled button" name="picture[picture]" type="file">

不幸的是，它没有工作，并创建了两个不同的按钮，让您选择一张图片。是否需要专门为文件字段执行任何操作？

我发现此资源对于设置输入类型=“文件”的样式非常有用：

这是出了名的困难，但这本质上涉及到将实际输入与应用了您的样式的假输入进行分层

<div class="file-inputs">
    <input type="file" class="hidden-input">
    <div class="fake-input">
        <input>
        <img src="images/YOURBUTTON.png">
    </div>
</div>

---

使用html css和js自定义文件上载按钮

Html代码：

    <div class="custom-file-upload">
    <!--<label for="file">File: </label>--> 
    <input type="file" id="file" name="myfiles[]" multiple />
    </div>

.custom-file-upload-hidden {
  display: none;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

.custom-file-upload {
  display: block;
  width: auto;
  font-size: 16px;
  margin-top: 30px;
}
  .custom-file-upload label {
  display: block;
  margin-bottom: 5px;
}

.file-upload-wrapper {
  position: relative;
  margin-bottom: 5px;
}

.file-upload-input {
  width: 300px;
  color: #fff;
  font-size: 16px;
  padding: 11px 17px;
  border: none;
  background-color: #c0392b;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  float: left;
  /* IE 9 Fix */
}

.file-upload-input:hover, .file-upload-input:focus {
   background-color: #ab3326;
   outline: none;
 }

.file-upload-button {
  cursor: pointer;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  padding: 11px 20px;
  border: none;
  margin-left: -1px;
  background-color: #962d22;
  float: left;
  /* IE 9 Fix */
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
 }

.file-upload-button:hover {
  background-color: #6d2018;
}

JS代码：

---

检查此项以了解完整的详细信息

诀窍是执行如下操作：

HTML

<button class="file-upload">Upload
  <input type="file" name="files" />
</button>

---

使用基础V5.5.2:

用户想用这个注释编辑上面的内容。在此添加：遗憾的是，此时您必须为输入type=“file”设置样式。您选择的CSS和JavaScript样式完全取决于您。我发现这个由创建的JSFIDLE是为了向您展示另一个CSS样式选项。另请参见：这个解决方案有一个大问题-您无法知道是否已经上传了内容。。这会立即扼杀用户体验。我当然不反对你的观点，只是回答了这个问题。此外，技巧保持不变，您只需调整按钮大小，以便仍然可以看到文本。或者，你可以用JavaScript来处理文件：），我确实这样做了——检查了文件的更改，并把上传的文件名放在按钮旁边的只读输入中，但是我希望Zurb基金会将这个解决方案从框中取出。

<button class="file-upload">Upload
  <input type="file" name="files" />
</button>

button.file-upload > input[type='file'] {
    cursor: pointer;
    position: absolute;
    font-size: 0;
    top: 0;
    left: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
}