Question

如何使用图像正确设置“文件”按钮的样式，以便在所有浏览器中看起来干净整洁，并且默认控件中没有重叠文本？

谢谢！

Answer 1

通常这样做的方法是使文件输入元素100％透明，使用css opacity属性并在其后面添加一个漂亮的按钮。这样，文件字段仍然会收到点击，但底层元素的外观可以按照您想要的方式设置样式并编写脚本。

Answer 2

文件按钮是一个令人头痛的问题。我个人会使用http://swfupload.org/

Answer 3

像往常一样，我喜欢这种KISS方法。这在chrome和firefox中对我有用。

HTML：

<script type='text/javascript' src='scripts/constants.js?rev=14.06'></script>
<script type='text/javascript' src='scripts/main.js?rev=14.06'></script>

CSS：

<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;" />

缺少类是bootstrap。

样式'FILE'输入类型元素

3 个答案: