Personnalisé Le Bouton De Téléchargement De

salut, je me demandais juste comment vous pouvez créer votre propre fichier personnalisé bouton de téléchargement, parce que le mieux que je puisse faire est

Personnalisé Le Bouton De Téléchargement De

et ce que je veux réaliser est

Personnalisé Le Bouton De Téléchargement De

si il est de toute façon de le faire, je serais très reconnaissante,
et s'il vous plaît puis-je avoir des réponses qui expliquent comment le faire avec du code et non pas des réponses avec des liens vers des sites web qui vous permettent de télécharger un bouton ou quelque chose comme ça,Merci 🙂

C'est un sujet très important pour expliquer comment faire 🙂
il s'agit d'un pur css truc qui prend peu d'explication. Voir ma réponse ci-dessous.
L'auteur a demandé une explication sur la manière de le faire. Vous avez donné un exemple de travail. J'ai peut-être tort, mais en fonction de la question, il semble que l'auteur a très peu de connaissances sur la façon de HTML/CSS/JavasScript œuvres. C'est pourquoi je pense que c'est un sujet très important pour expliquer comment faire 🙂
ok. juste assez.
J'ai utilisé une image dans la balise d'étiquette. Cela ne fonctionne pas avec IE8 hors de la boîte, mais j'ai capturé l'événement click sur l'image à l'aide de jQuery et déclenché un clic même de l'élément d'entrée.

OriginalL'auteur daka | 2011-06-23

  1. 1

    Utiliser CSS pour le style, la touche par son id ou une classe.

    Ce qui pourrait aider:
    http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

    La norme CSS techniques de coiffage ne fonctionne pas pour les contrôles d'entrée.

    OriginalL'auteur Sam

  2. 1

    La flèche n'est pas quelque chose que vous pouvez "faire juste avec le code", et les coins arrondis va fonctionner très bien sous firefox, mais pas sous ie à l'aide de css... si vous avez besoin d'utiliser une image personnalisée c'est facile:

    css:

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

    OriginalL'auteur Trey

  3. 1

    Ici est une approximation de la touche que vous souhaitez avec le 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;
}

    démo http://jsfiddle.net/gaby/qdX5d/2/

    pour des coins arrondis en pré-IE9 utilisation css3pie

    OriginalL'auteur Gabriele Petrioli

  4. 0

    L'étape 1. Créer une simple balise html

    <div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

    L'étape 2. CSS: Partie Délicate

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

    Pour la démonstration voir ici http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

    OriginalL'auteur Alex

  5. 0

    Utilisez l'entrée de l'étiquette, comme la coutume le bouton de téléchargement de:

    <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">

    et CSS:

     label.uploadfilelabel{/*custom label here*/}
 input[type=file]{display:none;}

    Avis que nous n'avons pas d'affichage de l'entrée principale bouton, parce que sinon il va occuper l'espace

    OriginalL'auteur Ormoz