我已經從幾個地方看過這個。造型輸入類型=「文件」
我試圖在這裏找到方法：http://www.quirksmode.org/dom/inputfile.html
我無法得到它的工作。所以我嘗試了一種CSS/HTML方法，它在Firefox，Chrome，Safari和Opera（所有最新版本）中運行良好，但不在IE8中（你猜對了）。
看起來很好，當你單擊它時，它不起作用。如果你雙擊它的作品。
任何想法如何讓這個工作只需點擊一下？
目前我正在使用IE條件註釋來告訴用戶使用IE雙擊選擇按鈕。該網站目前正在設計中，並未向用戶開放，並希望在可能之前解決此問題。
我想我找到了兩個解決你的問題。您正在使用：filter:alpha(opacity: 0) 您的.file類，從而隱藏您通常在上傳控件中看到的實際「瀏覽...」按鈕。
第一種解決方案是使用條件來設置CSS，以便在用戶使用IE時用正常但風格化的「瀏覽」按鈕替換您喜歡的「選擇」圖像。
第二個是玩FileAttachment輸入的大小，所以隱藏的「瀏覽...」按鈕將適合「選擇」圖像的位置。從那裏你只需要確保按鈕的z-index屬性高於圖像的屬性。
讓我知道這些解決方案是否能解決您的需求。
：d
基本上它不是你的問題，實際上IE是以不同的方式進行文件上傳控制。 它理解文件上傳控件作爲文本框和輸入按鈕，當你單擊文件上傳「瀏覽」或「選擇」按鈕時，會打開打開對話框，但是當你單擊文件上傳文本時，它將焦點放在文本框上，然後再次點擊這個文本框就會打開打開的對話框。可以說這是IE中的預定義錯誤，所以我們無法做任何事情，大多數用戶都知道這個問題。
我得到了一個解決方案，這將有助於你的風格，你多麼希望它保持到點擊在所有瀏覽過的按鈕。
基本上創建一個div並給它一個類或id，例如爲了讓我們調用這個「outer_div」。
然後將您的文件輸入放入「outer_div」，並給它一個id，對於這個例子我們稱之爲「file_input_name」。
接下來是CSS ...
對於「outer_div」給它的以下屬性
#outer_div{
cursor:pointer;
overflow:hidden;
display:block;
float:left;
position:relative;
width:83px;
height:25px;
background:url(your button image goes here) no-repeat;
}
確保您的按鈕有這個工作的寬度相同的屬性。
接下來的CSS的file_input_name：
#file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
}
這應該做的伎倆。基本上發生了什麼是我們正在把文件輸入，以便瀏覽按鈕在您的背景圖片上方，而不是文件URL的位置。
我已經完成了這個我自己，它在IE和Firefox/safari/chrome中工作。
讓我知道你如何得到或如果你需要更多的幫助。
這不能解決雙擊與單擊的問題，仍然覆蓋輸入框的區域必須雙擊vs覆蓋按鈕的區域單擊 – Matilda
他們必須雙擊的原因是因爲那是「文本區域」。
這裏的第一張圖片是一個IE8上傳控件。注意如何有文本框和按鈕。用戶單擊按鈕或雙擊文本框以調出按鈕。
[參數，對不起，我的名聲不是圖片不夠高]
當你覆蓋的是，文本區重疊你想成爲單一的點擊一下，使其需要雙擊。
這個下一個圖像是相同的文件上傳控制沒有不透明度，有一個按鈕，它有一個從IE8的DOM檢查器的輪廓。如果我點擊藍色矩形的右側大部分，單擊就可以工作，而其他任何地方都需要雙擊。還要注意文本編輯插入符號從頂部文件輸入的頂部按鈕。
[圖片省略]
的解決方法是調整/位置的文件隱藏的文件輸入到安放在你想要的瀏覽按鈕。
一個很好的解決方案，允許您單擊單擊工作是使用標籤元素，它的屬性「for」允許您將它連接到輸入。此解決方案的另一個重要元素是在輸入元素上應用filter：alpha（不透明度= 0）。
HTML：
<label for="fileupload">
<input id="fileupload" type="file" >
<p>click here</p>
</label>
CSS：
label {
background-color: #ECECEC;
display: block;
width: 600px;
height: 600px;
cursor: pointer;
}
input[type="file"] {
width: 100%;
height: 100%;
z-index: 100;
position: relative;
opacity: 0;
filter:alpha(opacity=0);
cursor: pointer;
}
這是正確的解決方案！非常感謝你。 – MatterGoal
使用一些引導魔術，我做到了，是超級容易。
好，後插在你的腦袋標籤鏈接引導CSS，這樣做：
<div class="fileUpload btn btn-primary"> <span>Upload</span> <input type="file" class="upload" /> </div>
這將創建一個輸入類型的文件，由引導CSS樣式。
現在棘手的部分：
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
而這一切，現在你有個時尚的功能按鈕（輸入類型的文件）。
我發現this article因爲我有同樣的問題，你可以檢查它的更多信息。
如果你想隱藏的默認輸入按鈕沒有鬆動的輸入文件，也跨瀏覽器支持的默認IE8行爲嘗試應用
input.file{
width:0 ;
height:0;
} //supposing your file input has class of .file`
和你的好去
它已經有一段時間，因爲我問了這個問題，下面是我現在用於樣式文件輸入的方法。此信息來自Codrops。它會進入更多的細節，並提供了幾個例子，但這裏有最基礎的：
HTML
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>
需要檢查JS
<html class="no-js">
<head>
<!-- remove this if you use Modernizr -->
<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
</head>
</html>
CSS
.js .inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
max-width: 80%;
font-size: 1.25rem;
/* 20px */
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 0.625rem 1.25rem;
/* 10px 20px */
}
.no-js .inputfile + label {
display: none;
}
.inputfile:focus + label,
.inputfile.has-focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
/* pointer-events: none; */
/* in case of FastClick lib use */
}
.inputfile + label svg {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
margin-top: -0.25em;
/* 4px */
margin-right: 0.25em;
/* 4px */
}
JS
;(function (document, window, index)
{
var inputs = document.querySelectorAll('.inputfile');
Array.prototype.forEach.call(inputs, function(input)
{
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener('change', function(e)
{
var fileName = '';
if(this.files && this.files.length > 1)
fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
else
fileName = e.target.value.split('\\').pop();
if(fileName)
label.querySelector('span').innerHTML = fileName;
else
label.innerHTML = labelVal;
});
// Firefox bug fix
input.addEventListener('focus', function(){ input.classList.add('has-focus'); });
input.addEventListener('blur', function(){ input.classList.remove('has-focus'); });
});
}(document, window, 0));
樣式化的輸入類型=「文件」 ... FML :) – tybro0103