html - 您如何使用 zurb 基础设置表单文件字段的样式？

Question

我正在尝试使用 Rails 创建一个带有 Zurb Foundation 的按钮来上传图片。我试过这个：

<input class="tiny round disabled button" name="picture[picture]" type="file">

不幸的是，它不起作用，并创建了两个不同的按钮让您选择图片。我需要专门针对文件字段做些什么吗？

Answer 1

我发现这个资源对设置 input type="file" 的样式很有帮助：

http://www.quirksmode.org/dom/inputfile.html

众所周知，这很困难，但这基本上涉及将实际输入与应用了您的样式的假输入分层。

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

使用以下 CSS：

div.file-inputs {
position: relative;
}

div.hidden-input {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
    text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

Answer 2

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

html代码：

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

CSS：

.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 代码： http ://codepen.io/wallaceerick/pen/fEdrz检查这个以获得完整的细节

Answer 3

诀窍是做一些看起来像这样的事情：

HTML

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

CSS

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

使用基础 v5.5.2：http ://codepen.io/soyuka/pen/xGMPKJ