刪除默認樣式的輸入類型=「文件」

我想上傳文件onclick圖標。但我無法刪除默認樣式input type="file"。刪除默認樣式的輸入類型=「文件」

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
 
    <label class="btn-btn-default"> 
 
    <i class="fa fa-upload fa-2x" aria-hidden="true"></i>Upload Document 
 
    <input type="file" class="form-control col-lg-2 col-md-2 col-sm-2"> 
 
    </label> 
 
</div>

Fiddle Link

請任何建議

來源

2017-04-12 user7397787

https：//開頭coderwall .com/p/uer3ow/total-input-type-file-style-control-with-pure-css請參閱此鏈接。 – SreenathPG

@SreenathPG當然。 – user7397787

更新2：
試試這個:)

function readURL(input) { 
 
     if (input.files && input.files[0]) { 
 
      $(".fa-upload").css("color", "green"); 
 
     }else{ 
 
      $(".fa-upload").css("color", "black"); 
 
     } 
 
    } 
 
    
 
    
 
$("#inputFile").change(function() { 
 
     readURL(this); 
 
    });

.file-upload { 
 
    display: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
 
    <label class="btn-btn-default"> 
 
    <div class="fa fa-upload fa-2x ">Upload Image</div> 
 
    <input id="inputFile" class="file-upload" type="file" accept="image/*" /> 
 
    </label> 
 
</div>

來源

2017-04-12 05:15:19

我想在上傳文件後改變'label'的顏色。怎麼做？ – user7397787

立即查看！當你選擇文件時，它會變成綠色，如果沒有選擇，那麼它變成黑色:) –

Add one class to the input field. Then in CSS hide it. Hope! this is what u want. 


<input type="file" class="hideMe form-control col-lg-2 col-md-2 col-sm-2"> 


.hideMe{ 
display: none; 
}

來源

2017-04-12 05:17:52

做到以下幾點：

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
         <label class="btn-btn-default"> 
          <i id="1" onclick="do2()" class="fa fa-upload fa-2x" aria-hidden="true"></i>Upload Document 
          <input id="2" style="display:none;"type="file" class="form-control col-lg-2 col-md-2 col-sm-2 "> 
         </label> 
        </div>

並添加到您的JavaScript來模擬自己的圖標，輸入行爲：

Function do2(){ 
document.getElementById("2").click; 
}

來源

2017-04-12 05:19:28

刪除默認樣式的輸入類型=「文件」

回答

相關問題