造型“文件”输入型因素

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; 
} 

缺少类是引导。