File input 的樣式和文字的更改方法__適用於Firefox、IE等瀏覽器

時間 2019-12-10

標籤 file input 樣式文字更改方法適用於 firefox 瀏覽器欄目 Firefox 简体版

原文原文鏈接

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input type file test - zishu.cn</title>
<style>
#uploadImg{
    margin:50px auto;
    font-size:12px; 
    position:relative; 
    font-size:16px; 
    width:64px; 
    height:22px; 
    line-height:22px; 
    overflow:hidden;
}
#file{
    position:absolute;
    left:0;
    top:0;
    height:22px;
    width:64px;
    opacity: 0;    /* Firefox, Safari(WebKit), Opera */  
    -ms-filter: "alpha(opacity=0)";     /* IE 8 */  
    filter: alpha(opacity=0);     /* IE 4-7 */
}
</style>
</head>
<body>
<form action="./test.php" enctype="multipart/form-data" method="POST" target="hide_iframe">
<div id="uploadImg">
    <input type="file" id="file" name="file" />
    <a href="#">上傳圖片</a>
</div>
</form>
</body>
</html>

相關標籤/搜索