造型「文件」輸入型因素

Question

如何正確風格「文件」按鈕，圖像，使其看到乾淨漂亮在所有瀏覽器和默認的控制沒有重疊的文本呢？

謝謝！

Answer 1

它通常做的方法是通過將文件輸入單元100％透明用CSS opacity財產，並把一個漂亮的按鈕，它的後面。這樣，文件字段仍然會收到點擊，但底層元素的外觀可以以任何您想要的方式進行樣式化和腳本化。

Answer 2

文件按鈕是一個大難題。我個人會用http://swfupload.org/

Answer 3

我喜歡這個吻的方式，像往常一樣。這在Chrome和Firefox中適用於我。

HTML：

<div class="form-group"> 
    <label>Cover Image:</label> 
    <div id="uploadLabelDiv" class="fade"> 
     <p>Change cover image</p> 
     <label for="upload"> 
       <img [src]="project.cover" class="img-responsive" id="coverImage" /> 
      </label> 
     </div> 
</div> 
<input type="file" id="upload" (change)="fileuploaded($event)" style="visibility:hidden;" /> 

CSS：

#uploadLabelDiv { 
    position: relative; 
    max-width: 400px; 
    background: transparent; 
    color: #fff; 
    transition: all 0.3s; 
} 

.fade { 
    opacity: 1; 
} 

.fade:hover > label { 
    opacity: 0.4; 
} 

.fade > p { 
    opacity: 0; 
    transition: none; 
} 

.fade:hover > p { 
    opacity: 1; 
    transition: all 0.3s; 
} 

p { 
    position: absolute; 
    top: calc(50% - 30px); 
    left: calc(50% - 60px); 
    color: black; 
    font: bold; 
} 

缺少類是引導。