样式化input type="file"按钮

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

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

当前回答

如果你正在使用Bootstrap 3，这对我来说是有效的:

参见https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

.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; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <span class="btn btn-primary btn-file"> Browse...<input type="file"> </span>

它会产生以下文件输入按钮:

认真的，去https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/看看吧

2015-08-05 16:49:35

其他回答

只有CSS

使用这个非常简单和容易

.choose: -webkit-file-upload-button { 颜色:白色; 显示:inline-block; 背景:# 1 cb6e0; 边界:没有; 填充:7px 15px; 粗细:700; border - radius: 3 px; 空白:nowrap;} 光标:指针; 字体大小:10 pt; ｝ <label>附加你的屏幕短片</label> <input type="file" multiple class=" select ">

2016-06-03 13:00:08

我发现插件解决方案太笨重了，所以我制作了自己的jQuery插件Drolex FileStyle。

This plug-in allows you to style file input fields however you want. Actually, you style div elements to look like a tricked out file input, and the actual file input is automatically overlaid with 0% opacity. No additional HTML is required. Just include the css and js files in the page you want Drolex FileStyle and that's it! Edit the css file to your liking. Don't forget the jQuery library if your page doesn't already have it. If the client does not run JavaScript, then the file input will not be modified by js or css.

测试工作在Chrome 24, Firefox 18, Internet Explorer 9。预计可以在之前的版本中使用。

下载:http://web.drolex.net/Drolex-FileStyle.zip。

2013-02-03 11:12:35

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

<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>

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

2013-09-04 07:08:50

本地拖放支持的工作示例:https://jsfiddle.net/j40xvkb3/

当样式化文件输入时，您不应该破坏任何本机交互输入提供。

display: none方法破坏了本地拖放支持。

为了不破坏任何东西，你应该对输入使用不透明度:0的方法，并在包装器中使用相对/绝对模式来定位它。

使用这种技术，你可以很容易地为用户设置点击/拖放区域的样式，并在dragenter事件上添加javascript自定义类来更新样式，并给用户一个反馈，让他看到他可以拖放文件。

HTML:

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

下面是一个工作示例(带有额外的JS来处理拖拽事件和删除的文件)。

https://jsfiddle.net/j40xvkb3/

希望这对你有所帮助!

2017-05-31 07:01:15

你可以创建一个很棒的(未完成的)文件上传器到<button>元素或任何其他元素:

函数selectFile() { . getelementbyid (fileSelector) .click (); ｝输入# fileSelector (type = "文件"){ 显示:没有; ｝按钮onclick * =”()”){ 光标:指针; ｝ <input type="file" id="fileSelector"> <按钮onclick = " selectFile ()>选择文件从计算机

2021-11-25 15:53:04

样式化input type="file"按钮

推荐文章

最新文章

标签