如何自定義輸入類型文件按鈕和文本框

fileupload cusomization

現在我的文件上傳按鈕看起來像文件上傳image.I需要定製它喜歡自定義文件上傳圖像

<form id="myform" action="" enctype="multipart/form-data"> 

    <input id="tele" type="file" name="filename" /> 
    <br/> 
    <input class="btn" type="submit" value="Upload" /> 
</form>

來源

2013-12-21 Rama Priya

的可能重複[如何式「輸入文件」與CSS3/JavaScript的？]（http://stackoverflow.com/questions/3226167/how-to-style-input-file- with-css3-javascript） –

答：風格它你想要它看起來如何IKE。 – MElliott

看你的形象後，我覺得你要輸入類型爲一個文本框，而不是button.Canü嘗試在保持輸入類型的文件爲隱藏，並具有文本框這樣

<input id="txt" type = "text" value = "Choose File" 
     onclick ="javascript:document.getElementById('file').click();"> 
     <input id = "file" type="file" style='visibility: hidden;' name="img" onchange="ChangeText(this, 'txt');"/> 



function ChangeText(oFileInput, sTargetID) { 

    document.getElementById(sTargetID).value = oFileInput.value; 
}

您可以輕鬆地應用CSS來這個文本框

DEMO

來源

2013-12-21 07:36:12

是它的部分working.What我必須做的顯示文本框中的上傳文件名@ Nitin varpe –

看到更新請 –

它不工作。你可以更新小提琴用這個代碼@ Nitin varpe –

給你當然要的風格，但對如何一些例子這是否提供如下。

input[type="file"] { 
     border: 4px solid red; 
     border-radius: 40px; 
}

，或者嘗試

#tele { 
    border: 4px solid red; 
    border-radius: 50px; 
}

如果由於某種原因沒有這些作品，你可能需要更具體的，像這樣

#myform #tele { 
    border: 3px solid blue; 
}

來源

2013-12-21 07:02:13 CRABOLO

或'.btn {'也.. – MElliott

我需要自定義type =「file」按鈕不提交按鈕。 @codehorse –

' MElliott

您可以使用background: url('image_url');添加一個按鈕圖像

來源

2013-12-21 07:07:31 Manolo

要解決此問題，您可以附上input標籤insi並設計一個可覆蓋按鈕的標籤。

來源

2013-12-21 07:29:51 mumush

如何自定義輸入類型文件按鈕和文本框

回答

相關問題