添加樣式文件中的CSS

Question

上傳按鈕我有一個文本框和按鈕，下面的CSS：

JS提琴鏈接：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> 

我想相同的樣式添加到文件上傳輸入類型。我是一名初學者。我如何使用這種風格來上傳文件按鈕？

Answer 1

我試過這看起來對我來說很不錯。這有什麼缺點嗎？ 這裏是的jsfiddle鏈接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> 

以下是圖像

Answer 2

嘗試這種解決方案：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

這是非常難以樣式文件的上傳按鈕，但如果你願意使用jQuery我發現this one插件是非常有用的。

它爲您提供了在任何DOM元素上「僞造」文件上傳按鈕功能的可能性，因此您可以以任何您想要的方式對其進行設計。適用於所有主流瀏覽器，包括舊版本的IE。

Answer 4

你也可以使用jQuery的，就像這樣：

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

這jQuery代碼

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

希望這可以幫助別人呢！

Answer 5

我在我的頁面上運行這個相對較短的jQuery，它包含一個或多個未更改的html <input type="file">元素。

jQuery將隱藏元素並在適當的地方插入新的模仿相同的行爲。

這個答案是類似於網頁上其他人，但在IE瀏覽器以及它的開發者的真正抽空來支持仔細考慮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)); 
    }); 
    }); 
}); 

現在，你只需要風格button.file和span.file，只要你喜歡，你是好去。

Answer 6

試試這個：

在把這個文件或其他地方後，你的css文件：input[type="file"]::-webkit-file-upload-button。 此語法僅適用於按鈕樣式。

如果你只放在那裏：input[type="file"]你可以設置你有文件名的數組。

Answer 7

這是link。你可以改變按鈕的風格。

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