如何将 Twitter bt-lg css 类应用于文件浏览输入按钮答案

【问题标题】：How to apply Twitter bt-lg css class to file browse input button如何将 Twitter bt-lg css 类应用于文件浏览输入按钮
【发布时间】：2013-09-11 17:35:12
【问题描述】：

我正在尝试设置文件输入按钮的样式，使其看起来像此处的添加文件按钮：

http://blueimp.github.io/jQuery-File-Upload/index.html

我尝试添加 twitter bootstrap btn-success bt-lg css 并设置输入文件按钮不透明度：0

我很难让输入按钮的大小与 blueimp 网站上的输入按钮完全一致：

按钮太大，我无法调整高度/宽度。

我应用了 twitter btn-lg css 并认为它可以解决大小问题。

所有其他按钮的大小可以为 btn-lg css escept 输入按钮。

我的 CSS 是：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" id="theme">
    <link rel="stylesheet" href="/Scripts/css/bootstrap.min.css" />

<style>
    #fileadd{
    opacity:0;
    }

我尝试直接在页面上添加Twitter bt-lg类的css

    #btnfile {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}

这里是输入按钮：

<div class="fileupload-buttonbar">
                    <label id="btnfile"class="btn btn-success btn-lg fileinput-button">
                        <span>Add files...</span>
                        <input id="fileadd" type="file" name="files[]" multiple>
                    </label>
@*                    <span id="uploadbtn" class="btn btn-success">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                    <input id="file" type="file" name="files[]" multiple>
                </span>*@
                    <button class="btn-primary btn-lg"  type="submit">Start upload</button>
                    <button type="reset" class="btn-warning btn-lg">Cancel upload</button>
                    <button type="button" class="btn-danger btn-lg">Delete files</button>
                </div>

【问题讨论】：

标签： jquery-ui twitter-bootstrap

【解决方案1】：

你不能只改变文件输入的不透明度，它仍然会占用所有默认空间，我只是从 blueimp 插件中复制样式：

#btnfile {
    position: relative;
}
#fileadd {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(-300px, 0) scale(4);
    font-size: 23px;
    direction: ltr;
    cursor: pointer;
}

Demo fiddle

【讨论】：