Hinzufügen Stil Upload-Button in css

Question

Ich habe ein Textfeld und Schaltfläche mit folgenden CSS-Datei:

JS Geige Link: 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> 

Ich mag den gleichen Stil in die Datei-Upload-Eingabe hinzufügen Art. Ich bin ein css Anfänger. Wie kann ich diesen Stil verwenden, um die Upload-Schaltfläche zu speichern?

Answer 1

Ich habe es versucht, es sieht ziemlich gut zu mir aus. Gibt es irgendwelche Mängel? Hier ist die jsfiddle Link 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> 

Hier sind die Bilder

Answer 2

Versuchen Sie, diese Lösung: 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()); 
}); 

Answer 3

Es ist notorisch schwer, Datei-Upload-Schaltflächen zu stylen, aber wenn Sie bereit sind, jQuery und ein Plugin zu verwenden, habe ich this one als sehr nützlich gefunden.

Es gibt Ihnen die Möglichkeit, Datei-Upload-Button-Funktionalität auf jedem DOM-Element zu "fälschen", so dass Sie es beliebig gestalten können. Funktioniert gut in allen gängigen Browsern einschließlich der alten IE-Versionen.

Answer 4

Sie könnten auch jQuery verwenden, wie folgt aus:

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

Und dieses jQuery-Code

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

Hofft, dass dies auch jemandem hilft!

Answer 5

Ich führe diese relativ kurze jQuery auf meiner Seite, die eine oder mehrere unveränderte html <input type="file"> Elemente enthält.

Die jQuery wird die Elemente verstecken und gegebenenfalls neue einfügen, die das gleiche Verhalten nachahmen.

Diese Antwort ist ähnlich zu anderen auf der Seite, wurde aber in IE-Browsern sowie in denen getestet, deren Entwickler tatsächlich die Zeit nehmen, sorgfältig überlegte Webstandards zu unterstützen.

$(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)); 
    }); 
    }); 
}); 

Jetzt müssen Sie nur auf Stil button.file und span.file, wie Sie möchten und Sie sind gut zu gehen.

Answer 6

versuchen Sie dies:

in Ihrem CSS-Datei auf das Ende der Datei setzen diese oder woanders: input[type="file"]::-webkit-file-upload-button. Diese Syntax ist nur für Schaltflächenstil.

Wenn Sie nur dort setzen: input[type="file"] können Sie das Array stylen, wo Sie den Dateinamen haben.

Answer 7

Hier ist ein link. Sie können den Stil der Schaltfläche ändern.

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