用CSS

Question

裝飾瀏覽按鈕，我添加了一個「瀏覽」按鈕，文件上傳與此命令

<input type="file" name="ForUpload[]" id="ForUpload" class="brw" onchange="addIitem()" on> 

這css樣式

.brw { 
    font-size: 20px; 
    color: white; 
    display: inline-block; 
    background: #1CB6E0; 
    border: none; 
    padding: 7px 15px; 
    font-weight: 700; 
    border-radius: 3px; 
    white-space: nowrap; 
    cursor: pointer; 
} 

當我與Firefox運行它，我看到「沒有選擇文件「和」瀏覽...「作爲按鈕文本。請參閱圖

我想提出一個按鈕，並編寫自定義文本作爲佔位符，例如請選擇音樂文件。我怎樣才能做到這一點？

Answer 1

我會建議使用參考輸入標籤的顯示按鈕的標籤標記，並顯示：沒有爲輸入的標籤。輸入標籤確實不是非常容易CSS的。

.brw { 
    font-size: 20px; 
    color: white; 
    display: inline-block; 
    background: #1CB6E0; 
    border: none; 
    padding: 7px 15px; 
    font-weight: 700; 
    border-radius: 3px; 
    white-space: nowrap; 
    cursor: pointer; 
} 

<input type="file" name="ForUpload[]" id="ForUpload" style="display:none" onchange="addIitem()" on> 
<label for="ForUpload" class="brw">For Upload</label> 

Answer 2

事實上，此按鈕樣式是固定且不可更改的，但您可以將樣式設置爲另一個框，元素或按鈕，並將主文件按鈕設置爲不可見，並設置樣式框，元素或按鈕單擊事件以觸發主文件按鈕點擊。

Answer 3

我認爲這段代碼對你很有幫助。

'use strict'; 
 

 
;(function (document, window, index) 
 
{ 
 
\t var inputs = document.querySelectorAll('.inputfile'); 
 
\t Array.prototype.forEach.call(inputs, function(input) 
 
\t { 
 
\t \t var label = input.nextElementSibling, 
 
\t \t labelVal = label.innerHTML; 
 

 
\t \t input.addEventListener('change', function(e) 
 
\t \t { 
 
\t \t \t var fileName = ''; 
 
\t \t \t if(this.files && this.files.length > 1) 
 
\t \t \t \t fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length); 
 
\t \t \t else 
 
\t \t \t \t fileName = e.target.value.split('\\').pop(); 
 

 
\t \t \t if(fileName) 
 
\t \t \t \t label.querySelector('span').innerHTML = fileName; 
 
\t \t \t else 
 
\t \t \t \t label.innerHTML = labelVal; 
 
\t \t }); 
 

 
\t \t // Firefox bug fix 
 
\t \t input.addEventListener('focus', function(){ input.classList.add('has-focus'); }); 
 
\t \t input.addEventListener('blur', function(){ input.classList.remove('has-focus'); }); 
 
\t }); 
 
}(document, window, 0));

.brw { 
 
    height: 0.1px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    width: 0.1px; 
 
    z-index: -1; 
 
} 
 
.brw + label { 
 
    background-color: #1DB6E0; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    padding:10px; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
.brw + label svg { 
 
    fill: currentcolor; 
 
    height: 1.5em; 
 
    margin-right: 0.25em; 
 
    margin-top: -0.25em; 
 
    vertical-align: middle; 
 
    width: 1.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <input type="file" name="ForUpload[]" id="ForUpload" class="inputfile brw" /> 
 
    <label for="ForUpload"><svg width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg><span>Please select the music file&hellip;</span></label> 
 
</div>

Answer 4

.file-input { 
 
    display: block; 
 
    border: 1px solid #f00; 
 
    cursor: pointer; 
 
} 
 
.file-input .label { 
 
    border: 1px solid #00f; 
 
} 
 
.file-input .input { 
 
    display: block /* to allow shape - since it's 'inline' by default */; 
 
    opacity: 0; 
 
    width: 0; 
 
    height: 0; 
 
    overflow: hidden /* probably a better way */; 
 
}

<label for='file-input-1' class='file-input'> 
 
    <div class='label'> 
 
    <span>Put your here</span> 
 
    </div> 
 

 
    <input id='file-input-1' class='input' type='file' /> 
 
</label>