样式化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使用下面的代码。我已经使用了bootstrap和font-awesome。

2016-12-30 08:07:26

这是一个纯CSS，无javascript，无bootstrap, 100%跨浏览器的解决方案!只需剪切粘贴一个样式块，然后测试您的文件上传控制。

这个解决方案不像其他文章那样试图隐藏然后重新创建原始HTML元素。它使用纯CSS，没有任何马戏团技巧或第三方工具，为所有主要浏览器设置原始文件上传表单控件的样式。你甚至不需要改变你的HTML代码!只需剪切并粘贴下面的代码到你的网页来测试它…

<style>
/* Note: This CSS will style all instances of 
   <input type=file /> controls in your website. */
input[type="file"],
input[type="file"]:visited,
input[type="file"]:hover,
input[type="file"]:focus,
input[type="file"]:active {
    margin:0;
    padding: 0em 0em;/* fallback: older browsers like IE 1-8 need "em" */
    padding: 0rem 0rem;/* older browsers dont know what "rem" is */
    overflow: hidden; /* long file names overflow so just hide the end */
    background: #fff;
    border-radius: .2em;
    border-radius: .2rem;
    outline: none;
    border: 2px solid #bbb;
    cursor: pointer;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}

input[type="file"]:hover {
    background: #f9f9ff; /* Optional rollover color: I am using a light blue to indicate an interaction */
    border: 2px solid #999;
}

input[type="file"]:visited,
input[type="file"]:focus,
input[type="file"]:active {
    background: #fff; /* Default back to white when focused. */
    border: 2px solid #999;
}

/* Note: These "disabled" selectors blow up in IE so have to be separated from the same styles above. */
input[type="file"]:disabled {
    margin: 0;
    padding: 0em 0em;
    padding: 0rem 0rem;
    overflow: hidden; /* long file names overflow so just hide the end */
    background: #ddd;
    border-radius: .2em;
    border-radius: .2rem;
    outline: none;
    border: 2px solid #bbb;
    cursor: pointer;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}

input[type="file"]:disabled:hover {
    background: #ddd; /* disabled-readonly buttons should be grey */
    border: 2px solid #999;
}

input[type="file"]:disabled:visited,
input[type="file"]:disabled:focus,
input[type="file"]:disabled:active {
    background: #ddd; /* disabled-readonly buttons should be grey */
    border: 2px solid #999;
}

/* IE UPLOAD BUTTON STYLE: This attempts to alter the file upload button style in IE.  Keep in mind IE gives you limited design control but at least you can customize its upload button.*/
::-ms-browse { /* IE */
    display: inline-block;
    margin: 0;
    padding: .2em .5em;
    padding: .2rem .5rem;
    text-align: center;
    outline: none;
    border: none;
    background: #fff;
    white-space: nowrap;
    cursor: pointer;
}
/* FIREFOX UPLOAD BUTTON STYLE */
::file-selector-button {/* firefox */
    display: inline-block;
    margin: 0rem 1rem 0rem 0rem;
    padding: .18em .5em;
    padding: .18rem .5rem;
    -webkit-appearance: button;
    text-align: center;
    border-radius: .1rem 0rem 0rem .1rem;
    outline: none;
    border: none;
    border-right: 2px solid #bbb;
    background: #eee;
    white-space: nowrap;
    cursor: pointer;
}
/* CHROME AND EDGE UPLOAD BUTTON STYLE */
::-webkit-file-upload-button { /* chrome and edge */
    display: inline-block;
    margin: 0rem 1rem 0rem 0rem;
    padding: .19em .5em;
    padding: .19rem .5rem;
    -webkit-appearance: button;
    text-align: center;
    border-radius: .1rem 0rem 0rem .1rem;
    outline: none;
    border: none;
    border-right: 2px solid #bbb;
    background: #eee;
    white-space: nowrap;
    cursor: pointer;
}
</style>

<input type="file" id="fileupload" name="fileupload" 
value="" tabindex="0" enctype="multipart/form-data" 
accept="image/*" autocomplete="off" multiple="multiple" 
aria-multiselectable="true" title="Multiple File Upload" 
aria-label="Multiple File Upload" />

<br /><br />

<input disabled="disabled" type="file" id="fileupload" 
name="fileupload" value="" tabindex="0" 
enctype="multipart/form-data" accept="image/*" 
autocomplete="off" multiple="multiple" 
aria-multiselectable="true" title="Disabled Multiple File Upload" 
aria-label="Disabled Multiple File Upload" />

这是文件上传控件在Firefox、Chrome和Edge中使用下面的CSS的样子。这是一个非常简单干净的设计。你可以把它变成你喜欢的样子:

Internet Explorer为您提供了有限的设计控制，但至少您可以使用CSS操作控件来更改一些东西，包括圆形边框和颜色:

我的解决方案的优点是:

You stick with simple CSS to style the original HTML input control You can see one or more file names in the file input textbox Screen readers and ARIA-friendly devices can interact normally with your file upload control You can set tabindex on your HTML element so its part of the tab order Because you are using plain HTML and CSS, your file input button works perfectly in old and new browsers ZERO JavaScript required! Runs and loads lighting fast in even the oldest of browsers Because your are not using "display:none" to hide the control, its file block stream data is never disabled from reaching the server in any old or new browser version known

你不需要愚蠢的JavaScript技巧，Bootstrap，或尝试隐藏/重新创建你的文件输入控件。这只会破坏所有在线用户的可用性。样式化原始HTML控件意味着你的文件上传控件在25年的新老浏览器中都能很好地工作。

This is why you cannot trust all these scripted hacks here that erase, rewrite, or destroy HTML just to try and recreate some visual experience. That shows that you do not understand how HTML is used or why its been around for 30 years practically unchanged. You should never try and rewrite HTML's native form control functionality. Why? There is more to using natural HTML in websites than just manipulation of markup for some forced visual experience. The trade-offs of limited visual design in these replaced HTML elements was designed that way for a reason.

我的建议是:坚持使用简单的HTML和CSS解决方案，作为web开发人员，你将没有任何问题。

2021-01-23 23:55:48

我发现最好的方法是有一个输入类型:文件，然后将其设置为display: none。给它一个id。创建一个按钮或任何您想要打开文件输入的其他元素。

然后在它(按钮)上添加一个事件侦听器，当单击它时，它会模拟对原始文件输入的单击。比如点击一个名为hello的按钮，但它会打开一个文件窗口。

示例代码

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

javascript

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })

2019-09-07 09:59:07

可见性:隐藏的技巧

我通常会使用可见性:隐藏技巧

这是我设计的按钮

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

这是input type=file按钮。注意可见性:隐藏规则

<input type="file" id="upload" style="visibility:hidden;">

这是JavaScript将它们粘合在一起。它的工作原理

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

2016-06-24 23:33:40

按照以下步骤，你就可以为你的文件上传表单创建自定义样式了:

this is the simple HTML form(please read the HTML comments I have written here below) <form action="#type your action here" method="POST" enctype="multipart/form-data"> <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>  <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>  <input type="submit" value='submit' > </form> then use this simple script to pass the click event to file input tag. function getFile(){ document.getElementById("upfile").click(); } Now you can use any type of styling without worrying about how to change default styles.

我非常清楚这一点，因为我已经尝试更改默认样式一个半月了。相信我，这是非常困难的，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建您的自定义文件上传表单。这里是完整的自动上传代码。

2012-03-03 14:42:38

样式化input type="file"按钮

推荐文章

最新文章

标签