首页 / 问答 / Bootstrap 中是否有自带Bootstrap风格的文件上传按钮,如果没有,又应该如何自定义美化文件上传按钮的样式呢?

Bootstrap 中是否有自带Bootstrap风格的文件上传按钮,如果没有,又应该如何自定义美化文件上传按钮的样式呢?

0

如题,Bootstrap 中是否有自带Bootstrap风格的文件上传按钮,如果没有,又应该如何自定义美化文件上传按钮的样式呢?
浏览器默认的文件上传按钮样式实在是看不下去了,有没有使用CSS样式来美化默认的文件上传按钮样式呢?

回复 [×]
提交评论
请输入评论内容

2 个回答

  • 0

    Bootstrap中也默认也没有实现Bootstrap风格的上传按钮样式,但我们可以使用<label>标签来巧妙实现—将文件上传按钮标签放在一个<label>标签中,并且将这个上传按钮隐藏起来,这样我们只需要美化<label>标签就可以了,代码如下:

    HTML

    <label class="btn btn-default">
        Browse <input type="file" hidden>
    </label>
    

    CSS

    [hidden] {
      display: none !important;
    }
    

    以上方式可以适用于大多数现代浏览器,包括IE9+,如果你需要兼容IE8及以下的浏览器,则还需要做一些特殊处理,如下:

    HTML

    <span class="btn btn-default btn-file">
        Browse <input type="file">
    </span>
    

    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: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }
    
    Rector的个人主页

    Rector

    19天前 回答

    • 0

      当然,除了使用纯HTML和CSS样式来实现自定义上传按钮之处,我们还可以借助jQuery来实现,如下:

      <label class="btn btn-primary" for="my-file-selector">
          <input id="my-file-selector" type="file" style="display:none" 
          onchange="$('#upload-file-info').html(this.files[0].name)">
          Button Text Here
      </label>
      <span class='label label-info' id="upload-file-info"></span>
      
      Rector的个人主页

      Rector

      19天前 回答

      我来回答