文件上傳按鈕裏面的輸入組圖標

我試圖讓輸入組成爲文件上傳按鈕，裏面有一個圖標。我曾嘗試以下方法：文件上傳按鈕裏面的輸入組圖標

<div class="row"> 
    <div class="col-xs-10 col-md-6"> 
    <div class="form-group"> 
     <label>File</label> 
     <div class="input-group"> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-secondary">+</button> 
     </span> 
     <input type="text" class="form-control" /> 
     <i class="input-group-btn fa fa-picture-o"> 
      <input type="file" class="btn btn-secondary" /> 
     </i> 
     </div> 
    </div> 
    </div> 
</div>

沒有成功...以下是plunker。我想要的是一個像左側的按鈕，但裏面有一個圖標和文件上傳功能。

請注意，我需要它的工作對引導4

來源

2017-06-26 ncohen

如果沒有JS替換''，這是不可能的。 CSS在其輸入類型可以或不可以改變的地方是有限的。 –

@RobertC這是不正確的，我可以使用bootstrap 3 – ncohen

可能想了解Bootstrap 4如何處理它自己的烘焙自定義文件瀏覽器：https：//v4-alpha.getbootstrap.com/components/forms /＃文件瀏覽器 –

我已經通過添加以下CSS成功：

.btn-file { 
    position: relative; 
    overflow: hidden; 
} 
.btn-file input[type=file] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    min-width: 100%; 
    min-height: 100%; 
    font-size: 999px; 
    text-align: right; 
    opacity: 0; 
    outline: none; 
    background: #fff; 
    cursor: pointer; 
    display: block; 
}

和構建我的html：

<div class="form-group"> 
     <label>File</label> 
     <div class="input-group"> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-secondary">+</button> 
     </span> 
     <input type="text" class="form-control" /> 
     <span class="input-group-btn"><span class="btn btn-secondary btn-file"><span class="fa fa-picture-o"></span> 
      <input type="file" accept="image/png, image/jpeg, image/gif"/></span></span> 
     </div> 
    </div>

見plunker here

來源

2017-06-28 10:32:21 ncohen

文件上傳按鈕裏面的輸入組圖標

回答

相關問題