相关疑难解决方法(0)

为什么Twitter bootstrap没有花哨的文件元素上传按钮？如果为上传按钮实现了蓝色主按钮,那将是很好的.甚至可以使用CSS来精简上传按钮吗？(看起来像是无法操作的本机浏览器元素)

我正在尝试根据个人喜好设置文件上传按钮的样式,但如果没有JS,我找不到任何真正可行的方法.我确实找到了 关于这个主题的另外两个问题,但那里的答案要么涉及JavaScript,要么建议采用Quirksmode的方法.

这个Quirksmode方法的主要问题是文件按钮仍然具有浏览器定义的尺寸,因此它不会自动调整为用作放置在它下面的按钮的任何东西.我已经制作了一些基于它的代码,但它只占用了文件按钮通常占用的空间,所以它根本不会像我想要的那样填充父div.

HTML:

<div class="myLabel">
    <input type="file"/>
    <span>My Label</span>
</div>

CSS:

.myLabel {
    position: relative;
}
.myLabel input {
    position: absolute;
    z-index: 2;
    opacity: 0;
    width: 100%;
    height: 100%;
}

这个小提示演示了这种方法是如何存在严重缺陷的.在Chrome中,单击!!下面的第二个演示按钮将打开文件对话框,但在所有其他浏览器中,文件按钮不会占用按钮的正确区域.

有没有更坚实的方式来设置文件上传按钮的样式,没有任何JavaScript,并且最好使用尽可能少的"hacky"编码(因为黑客通常带来其他问题,例如小提琴中的那些)？

我正在使用ng2-file-upload(单个上传示例),我想使用:ng2FileSelect使用按钮或div而不是文件输入.我怎样才能做到这一点？

我想要这样做:

<button ng2FileSelect [uploader]="uploader">Choose file</button>

代替:

<input type="file" ng2FileSelect [uploader]="uploader" />

如果不存在使用ng2-file-upload的干净方式,你知道另一种选择吗？

我想更改 Rails 应用程序中默认的“选择文件”按钮。我正在使用Bootstrap，并且想用Bootstrap Glyphicons 之一替换该按钮。

div这 是class form-group控制“选择文件”按钮的

<div class="form-group">
    <%= f.label :image %><br>
    <%= f.file_field :image, class: "form-control" %>
</div>

我想自定义我的input type file按钮.为此,我把它放在一个span并设置visibility为hidden.

     <span class="btn btn-default" flow-btn>
        Please choose a file
      <input type="file"style="visibility: hidden; position: absolute;"></span>

我的问题是,当我点击跨度时,没有任何反应,但当我visibility: hidden从中删除时style,则会显示选择文件弹出窗口.

input type="file"即使它隐藏了,我怎么能得到相同的结果呢？

  <span class="btn btn-default" flow-btn>
        Please choose a file
      <input type="file"style="visibility: hidden; position: absolute;"></span>