Twitter Bootstrap表单文件元素上传按钮

CSS

梅Harry

2020-03-17

为什么没有用于Twitter引导程序的精美文件元素上载按钮?如果为上传按钮实现了蓝色主按钮,那就太好了。甚至可以使用CSS精细化上传按钮吗?(似乎是无法操纵的本机浏览器元素)

第1902篇《Twitter Bootstrap表单文件元素上传按钮》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
猴子Harry路易 2020.03.17

我以为我要加上三便士的价值,只是说出默认.custom-file-labelcustom-file-inputBS4文件输入以及如何使用它们。

后一类在输入组上,不可见。前者是可见标签,并且具有:after伪元素,看起来像一个按钮。

<div class="custom-file">
<input type="file" class="custom-file-input" id="upload">
<label class="custom-file-label" for="upload">Choose file</label>
</div>

您不能将类添加到伪元素,但是可以在CSS(或SASS)中设置其样式。

.custom-file-label:after {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1c7430;
    pointer: cursor;
}
乐米亚 2020.03.17

http://markusslima.github.io/bootstrap-filestyle/

$(":file").filestyle();

要么

<input type="file" class="filestyle" data-input="false">
西门 2020.03.17

这是我喜欢的最佳文件上传样式:

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
    <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

您可以在以下位置获得演示和更多样式:

http://www.jasny.net/bootstrap/javascript/#fileinput

但是使用此方法,您应该用jasny引导程序文件替换twitter引导程序。

问候。

番长樱梅 2020.03.17

具有可接受结果的简单解决方案:

<input type="file" class="form-control">

和样式:

input[type=file].form-control {
    height: auto;
}
番长Vicky 2020.03.17

上传按钮的样式很麻烦,因为它为输入而不是按钮设置样式。

但是您可以使用以下技巧:

http://www.quirksmode.org/dom/inputfile.html

摘要:

  1. 选取法线<input type="file">并将其放入的元素中position: relative

  2. 向同一父元素添加<input>具有正确样式的法线和图像。绝对放置这些元素,以便它们与占据相同的位置<input type="file">

  3. 将的z-index设置<input type="file">为2,使其位于样式输入/图像的顶部。

  4. 最后,将的不透明度设置<input type="file">为0。<input type="file">现在将变为实际上不可见,并且样式输入/图像也会照亮,但是您仍然可以单击“浏览”按钮。如果按钮位于图像的顶部,则用户似乎单击图像并获得常规的文件选择窗口。(请注意,您不能使用“可见性:隐藏”,因为真正不可见的元素也是不可点击的,因此我们需要保持点击状态)

西门Gil 2020.03.17

它包含在Jasny的bootstrap中。

可以使用以下命令创建一个简单的上传按钮

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

使用fileupload插件,您可以创建更多高级小部件。看看 http://jasny.github.io/bootstrap/javascript/#fileinput

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android