Ajout de style au bouton de téléchargement de fichier dans css

J'ai un champ de texte et un bouton avec le code css suivant:

JS fiddle lien : http://jsfiddle.net/Tdkre/

.submit {
-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
box-shadow:inset 0px 1px 0px 0px #cae3fc;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #469df5;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:14px;
font-weight:bold;
padding:5px 14px;
text-decoration:none;
text-shadow:1px 1px 0px #287ace;
cursor:pointer;
}
.submit:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
background-color:#4197ee;
}
.submit:active {
position:relative;
top:1px;
}
.text-input {
padding: 6px;
font-size: 13px;
border: 1px solid #d5d5d5;
color: #333;
border-radius: 4px 4px 4px 4px !important;
}
<form>
<input type="text" class="text-input" size="40"/>
<input type="button" value="Upload" id="upload" class="submit"/>
</form>

Je veux ajouter le même style pour l'upload de fichier du type d'entrée. Je suis un css débutant. Comment puis-je utiliser ce style de téléchargement de fichiers bouton?

source d'informationauteur sonam | 2013-01-18

  1. 16

    D'essayer cette solution: http://jsfiddle.net/JJRrc/1/

    Html

    <p class="form">
<input type="text" id="path" />
<label class="add-photo-btn">upload
<span>
<input type="file" id="myfile" name="myfile" />
</span>
</label>
</p>

    CSS

    .form input[type="file"]{
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
opacity: 0;
filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
left:0;
}
.add-photo-btn{
position:relative;
overflow:hidden;
cursor:pointer;
text-align:center;
background-color:#83b81a;
color:#fff;
display:block;
width:197px;
height:31px;
font-size:18px;
line-height:30px;
float:left;
}
input[type="text"]{
float:left;
}

    JQuery

    $('#myfile').change(function(){
$('#path').val($(this).val());
});
  2. 8

    Vous pouvez également utiliser jQuery, comme ceci: 

    <img id="image" style="cursor:pointer;" src="img.jpg" />
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>

    Et ce jquery code

    $("#image").click(function(){
$("#photosubmit").click();
});

    Espérant que cela aide quelqu'un de trop!

  3. 7

    J'ai essayé ce qu'il semble assez bon pour moi. Existe-il des défauts?
    Voici le jsfiddle lien http://jsfiddle.net/Tdkre/1/

    #FileUpload {
position:relative;
}
#BrowserVisible {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background:url(upload.png) 100% 1px no-repeat;
width:345px;
height:30px;
}
#FileField {
width:250px;
margin-right:85px;
padding: 6px;
font-size: 13px;
background: #fff url('bg-form-field.gif') top left repeat-x;
border: 1px solid #d5d5d5;
color: #333;
border-radius: 4px 4px 4px 4px !important;
}
#BrowserHidden {
position:relative;
width:345px;
height:30px;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2; 
}
<div id="FileUpload">
<input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
<div id="BrowserVisible"><input type="text" id="FileField" /></div>

    Voici les images
    Ajout de style au bouton de téléchargement de fichier dans css
    Ajout de style au bouton de téléchargement de fichier dans css

  4. 3

    essayez ceci:

    Dans votre fichier css de mettre cela sur la fin du fichier ou ailleurs: input[type="file"]::-webkit-file-upload-button.
    Cette syntaxe est seulement pour le style de bouton.

    Si vous y mettre seulement: input[type="file"] vous pouvez définir le style du tableau où vous avez un nom de fichier.

  5. 1

    Il est notoirement difficile de fichier de style de télécharger des boutons, mais si vous êtes prêt à utiliser jQuery et un plugin que j'ai trouvé cette une être très utile.

    Il vous donne la possibilité de "faux" téléchargement de fichiers fonctionnalité du bouton sur n'importe quel élément du DOM, de sorte que vous pouvez le style de n'importe quelle manière que vous voulez. Fonctionne bien dans tous les principaux navigateurs, y compris l'ancien versions IE.

  6. 1

    Je lance cette relativement courte jQuery sur ma page qui contient un ou plusieurs inchangée html <input type="file"> éléments.

    Le jQuery permet de masquer les éléments et insérer de nouveaux le cas échéant, que de reproduire les mêmes comportements.

    Cette réponse est similaire à d'autres personnes sur la page, mais a été testé dans IE navigateurs ainsi que ceux dont le développeur est en fait de prendre le temps de soutien examiné attentivement les standards du web. 

    $(document).ready(function(){
//replace all file upload elements for styling purposes
$('input[type="file"]').each(function(){
var btn = $('<button class="file">Browse...</button>');
var txt = $('<span class="file"></span>');
$(this).after(txt).after(btn);
$(this).css({display:'none'});
var target = this;
$(btn).click(function(ev){ 
ev.preventDefault(); 
$(target).click(); 
})
$(target).change(function(){
//IE uses a stupid renaming scheme that includes "fake-path"
var fname = $(target).val()
$(txt).html(fname.substr(fname.lastIndexOf('\\')+1));
});
});
});

    Maintenant, vous juste besoin de style button.file et span.file que vous le souhaitez et vous êtes bon pour aller.

  7. 0

    Ici est un lien. Vous pouvez changer de style de bouton.

    HTML

    <button>upload</button>
<input type="text" id="f" disabled="disabled" />
<input id="html_btn" type='file' " /><br>

    CSS

    button {
border-radius:10px;
padding:5px;
}
#html_btn {
display:none;
}

    Javascript

    $('button').bind("click", function () {
$('#html_btn').click();
});
$('#html_btn').change(function () {
document.getElementById("f").value = $('#html_btn').val();
});