html - zurb Foundation でフォーム ファイル フィールドをどのようにスタイルしますか?

Question

写真をアップロードするためにRailsを使用してZurb Foundationでボタンを作成しようとしています。私はこれを試しました：

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

残念ながら、これは機能せず、画像を選択できる 2 つの異なるボタンが作成されました。特にファイル フィールドに対して行う必要があることはありますか?

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詳細については、こちらを確認してください