你如何风格输入类型=“文件”按钮?

<输入类型=“文件” />


当前回答

如果你正在寻找一个javascript库开箱即用的解决方案,jquery-fileinput工作得很好。

其他回答

:: file-selector-button

https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

这是一个新的选择器,可用于设置文件选择器按钮的样式。

它在最新的浏览器版本上得到了全面支持。

输入(type =文件)::file-selector-button { 边框:2px实体#6c5ce7; 填充:.2em .4em; border - radius: .2em; background - color: # a29bfe; 过渡:1; } 输入(type =文件)::file-selector-button:{徘徊 background - color: # 81 ecec; 边框:2px实体#00cec9; } < >形式 <label for="fileUpload">上传文件</label> <input type="file" id="fileUpload"> > < /形式

下面是另一个演示不同样式的代码片段:

.input_container { 边框:1px solid #e5e5e5; } 输入(type =文件)::file-selector-button { background - color: # fff; 颜色:# 000; 边界:0 px; 右边框:1px solid #e5e5e5; 填充:10px 15px; margin-right: 20 px; 过渡:0; } 输入(type =文件)::file-selector-button:{徘徊 background - color: # eee; 边界:0 px; 右边框:1px solid #e5e5e5; } < >形式 < div class = " input_container”> <input type="file" id="fileUpload"> < / div > > < /形式

我觉得这个答案是必要的,因为这里的大多数答案都过时了。

我能想到的唯一方法是在它被渲染后用javascript找到按钮,并分配一个样式给它

你也可以看看这个记录

这是一个很好的方法来做材料/角文件上传。 你可以用bootstrap按钮做同样的事情。

注意,我使用了<a>而不是<button>,这允许点击事件冒泡。

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>

我能够做到这与纯CSS使用下面的代码。我已经使用了bootstrap和font-awesome。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <label class="btn btn-default btn-sm center-block btn-file"> <i class="fa fa-upload fa-2x" aria-hidden="true"></i> . <input type="file" style="display: none;"> < / >标签

我发现了一个非常简单的方法来切换文件按钮到图片。 你只需要给图片贴上标签,然后把它放在文件按钮的顶部。

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

单击标记图像时,选择文件按钮。