Comment faites-vous le style de fichier de formulaire les champs avec zurb foundation?

Je suis en train de créer un bouton avec Zurb Foundation à l'aide de Rails de de téléchargement d'une photo. J'ai essayé ceci:

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

Malheureusement, il n'a pas de travail et deux boutons qui vous permettent de choisir une image. Est-il quelque chose que je dois faire spécifiquement pour les champs de fichier?

OriginalL'auteur user1779563 | 2013-03-09

  1. 4

    J'ai trouvé cette ressource très utile avec un style input type="file" :

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

    Il est notoirement difficile mais, essentiellement, cela implique la superposition de l'entrée effective avec un faux, c'est votre style qui lui est appliqué.

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

    Pour aller avec le code CSS suivant: 

    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;
}
    Un utilisateur veut modifier le au-dessus de ce commentaire. Ajouté ici: Malheureusement, son ce que vous avez à faire à un style input type="file" en ce moment. Le CSS et le JavaScript, vous choisissez de style, il est complètement à vous. J'ai trouvé ce jsfiddle créé par gabrieleromanato pour vous montrer un autre CSS pour le style.
    Voir aussi: Style d'entrée type de fichier? double Comment style “fichier d'entrée” avec CSS3 / Javascript? Style un input type=“file” bouton.

    OriginalL'auteur imcconnell

  2. 1

    De fichier personnalisé bouton de téléchargement à l'aide de html, de css et de js

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

    CODE JS:
    http://codepen.io/wallaceerick/pen/fEdrz vérifier celui-ci pour plus de détails

    OriginalL'auteur Chinmaya Hegde