当前位置： 文江博客话题详情

设置输入类型=“文件”的样式

发布于 2024-11-18 01:18:48 字数 407 浏览 3 评论 0原文

我从几个地方读到过这件事。

我尝试过这里找到的方法： http://www.quirksmode.org/dom/inputfile.html

我无法让它工作。所以我尝试了 CSS/HTML 方法，它在 Firefox、Chrome、Safari 和 Opera（所有最新版本）中运行良好，但在（你猜对了）IE8 中却行不通。

看起来很好，当你单击它时，它不起作用。如果双击它，它就会起作用。

有什么想法如何让它通过单击来工作吗？

目前我正在使用 IE 条件注释告诉 IE 用户双击选择按钮。该网站目前正在设计中，尚未向用户上线，如果可能的话，希望在上线之前解决此问题。

原文

I have read about this from several places.

I have tried the method found here: http://www.quirksmode.org/dom/inputfile.html

I could not get it to work. So I tried a CSS/HTML method and it works beautifully in Firefox, Chrome, Safari, and Opera (all latest versions) but does not in (you guessed it) IE8.

It looks fine, when you single click it, it doesn't work. If you double click it it works.

Any ideas how to get this to work with a single click?

Currently I am using IE conditional comments to tell users with IE to double click the select button. The site is currently in design and not live to users yet and would like to solve this issue before it goes live if possible.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

傾旎 2024-11-25 01:18:48

允许您进行单击工作的一个不错的解决方案是使用标签元素及其属性“for”，该属性允许您将其连接到输入。该解决方案的另一个重要元素是在输入元素上应用filter:alpha(opacity=0)。

HTML：

 <label for="fileupload"> 
     <input id="fileupload" type="file" >   
     <p>click here</p>
 </label>

CSS：

label {
   background-color: #ECECEC;
   display: block;
   width: 600px;
   height: 600px;
   cursor: pointer;
}

input[type="file"] {
   width: 100%;
   height: 100%;
   z-index: 100;
   position: relative;
   opacity: 0;
   filter:alpha(opacity=0); 
   cursor: pointer;
 }

A nice solution which allows you to make single click work is to use a label element, and its property "for" which allows you to connect it to the input. Another important element of this solution is to apply filter:alpha(opacity=0) on the input element.

HTML:

 <label for="fileupload"> 
     <input id="fileupload" type="file" >   
     <p>click here</p>
 </label>

CSS:

label {
   background-color: #ECECEC;
   display: block;
   width: 600px;
   height: 600px;
   cursor: pointer;
}

input[type="file"] {
   width: 100%;
   height: 100%;
   z-index: 100;
   position: relative;
   opacity: 0;
   filter:alpha(opacity=0); 
   cursor: pointer;
 }
回复 原文
忆伤 2024-11-25 01:18:48

我找到了一个解决方案，可以帮助您按照自己的意愿设置按钮的样式，并在所有浏览器中保持一键单击。

基本上创建一个 div 并给它一个类或 id，例如，我们将其称为“outer_div”。

然后将文件输入放在“outer_div”内，并为其指定一个 id，在本例中，我们将其称为“file_input_name”。

接下来是 CSS...

对于“outer_div”，为其提供以下属性

    #outer_div{
    cursor:pointer;
    overflow:hidden;
    display:block;
    float:left;
    position:relative;
    width:83px;
    height:25px;
    background:url(your button image goes here) no-repeat; 
    }

确保您的按钮具有相同的宽度属性才能正常工作。

接下来是 file_input_name 的 CSS：

  #file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
        }

这应该可以解决问题。基本上，我们将文件输入放在背景图像上方，而不是文件 URL 所在的位置。

我自己做了这个，它可以在 IE 和 Firefox / safari / chrome 中工作。

让我知道您的进展情况或者您是否需要更多帮助。

I got a solution that will help you style the button how you wish and keep it to one click in all browsers too.

Basically create a div and give it a class or id, for examples sake lets call this "outer_div".

Then place your file input inside the "outer_div" and also give it an id, for this example lets call it "file_input_name".

Next comes the CSS...

For the "outer_div" give it the following properties

    #outer_div{
    cursor:pointer;
    overflow:hidden;
    display:block;
    float:left;
    position:relative;
    width:83px;
    height:25px;
    background:url(your button image goes here) no-repeat; 
    }

Make sure your button has the same width properties for this to work.

Next the CSS for file_input_name:

  #file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
        }

This should do the trick. Basically what's happening is we are putting the file input so that the browse button is above your background image instead of where the file URL is.

I have done this my self and it works in IE and Firefox / safari / chrome.

Let me know how you get on or if you need more help.

回复 原文
颜 2024-11-25 01:18:48

我想我找到了解决你问题的两种方法。您正在使用：filter:alpha(opacity: 0)
在您的 .file 类上，从而隐藏您通常在上传控件中看到的实际“浏览...”按钮。

第一个解决方案是使用条件来设置 CSS，当用户使用 IE 时，该 CSS 将用正常但样式化的“浏览”按钮替换精美的“选择”图像。

第二个是调整 FileAttachment 输入的大小，因此隐藏的“浏览...”按钮将适合“选择”图像的位置。从那里，您只需确保按钮的 z-index 属性高于图像的属性。

请告诉我这些解决方案是否能满足您的需求。

：D

I think I found two solutions to your problem. You are using: filter:alpha(opacity: 0)
on your .file class, thus hiding the actual "Browse..." button you usually see in upload controls.

The first solution would be to use a conditional to set the CSS that will replace your fancy "Select" image with the normal yet styled "Browse" button when the user is using IE.

The second one would be to play with the size of the FileAttachment input and so the hidden "Browse..." button would fit in the position of the "Select" image. From there you just have to make sure that the z-index property of the button is higher than the one of the image.

Let me know if these solutions solve your needs.

:D

回复 原文
血之狂魔 2024-11-25 01:18:48

他们必须双击的原因是因为那是“文本区域”。

这里的第一张图片是 IE8 上传控件。请注意文本框和按钮的存在方式。用户单击按钮或双击文本框以调出按钮。

[arg，抱歉，我的声誉对于图片来说不够高]

当您覆盖它时，文本区域与您想要单击的内容重叠，导致它需要双击。

下一张图片是相同的文件上传控件，没有不透明度，其顶部有一个按钮，并且具有来自 IE8 的 DOM 检查器的轮廓。如果我单击蓝色矩形的最右边部分，则只需单击一次即可，其他地方都需要双击。另请注意按钮顶部的文件输入中覆盖的文本编辑插入符号。

[图片省略]

解决方案是调整文件隐藏文件输入的大小/位置，将浏览按钮放在您想要的位置。

The reason they must double click is because that's the "text area."

The first image here is of an IE8 upload control. Note how there's the textbox and the button. The user single clicks the button OR double clicks the text box to bring up the button.

[ arg, sorry, my reputation is not high enough for pictures ]

When you're overlaying that, the text area is overlapping what you want to be single click, causing it to require a double click.

This next image is the same file upload control with no opacity, has a button over the top of it, and has an outline from IE8's DOM inspector. If I click the right most part of the blue rectangle a single click works, every where else requires a double. Also note the text editing caret overlayed from the file input ontop the button.

[ image omitted ]

The solution is to resize/position the file hidden file input to put the browse button where you want it.

回复 原文
淡淡離愁欲言轉身 2024-11-25 01:18:48

使用一些Bootstrap魔法，我做到了，非常简单。

好的，在 head 标签中插入 Bootstrap css 的链接后，执行以下操作：

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

这将创建一个输入类型文件，由引导 CSS 设计样式。

现在是棘手的部分：

  .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

就是这样，现在您有了一个带有样式的功能按钮（输入类型文件）。

我找到了这篇文章因为我也遇到了同样的问题，你可以查看一下以获取更多信息。

Using some Bootstrap magic, I did it, is super easy.

Ok, after inserted the link to Bootstrap css in your head label, do this:

<div class="fileUpload btn btn-primary">
<span>Upload</span>
<input type="file" class="upload" />
</div>

That will create an input type file, styled by the bootstrap css.

And now the tricky part:

  .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

And that's all, now you have a functional button (input type file) with style.

I found this article because I had the same problem, you can check it for more info.

回复 原文
美人迟暮 2024-11-25 01:18:48

基本上这不是你的问题，实际上 IE 以不同的方式进行文件上传控制。
它将文件上传控件理解为文本框和输入按钮，当您单击文件上传“浏览”或“选择”按钮时，它会打开打开的对话框，但是当您单击文件上传文本时，它会聚焦于文本框，然后再次单击此文本框将打开打开的对话框。可以说这是 IE 中预定义的错误，因此我们无能为力，并且大多数用户都知道这个问题。

Basically it is not your problem actually IE takes a file upload control in different manner.
It understand the file upload control as a textbox and input button, when you single click on file upload "Browse" or "select" button it opens open dialog box but when you single clicked on file upload text it focus the textbox and and then again click on this textbox it will open the open dialog box. It can say this is predefined bug in IE so we can't do anything in that and most of users know this problem.

回复 原文
陌上芳菲 2024-11-25 01:18:48

如果您尝试隐藏默认输入按钮而不丢失输入文件上的默认 IE8 行为以及跨浏览器支持，请尝试

input.file{
   width:0 ; 
   height:0;
}  //supposing your file input has class of .file`

在 css 中应用，那么您就可以开始了

If your trying to hide the default input button without loosing the default IE8 behavior on input file and also cross browser support try applying

input.file{
   width:0 ; 
   height:0;
}  //supposing your file input has class of .file`

in the css and your good to go

回复 原文
强辩 2024-11-25 01:18:48

自从我问这个问题以来已经有一段时间了，下面是我现在用于设置文件输入样式的方法。此信息来自 Codrops。它更详细，并提供了几个示例，但以下是基础知识：

HTML

 <input type="file" name="file" id="file" class="inputfile" />
 <label for="file">Choose a file</label>

需要检查 JS

<html class="no-js">
  <head>
      <!-- remove this if you use Modernizr -->
      <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
  </head>
</html>

CSS

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

JS

;( function ( document, window, index )
{
    var inputs = document.querySelectorAll( '.inputfile' );
    Array.prototype.forEach.call( inputs, function( input )
    {
        var label    = input.nextElementSibling,
            labelVal = label.innerHTML;

        input.addEventListener( 'change', function( e )
        {
            var fileName = '';
            if( this.files && this.files.length > 1 )
                fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
            else
                fileName = e.target.value.split( '\\' ).pop();

            if( fileName )
                label.querySelector( 'span' ).innerHTML = fileName;
            else
                label.innerHTML = labelVal;
        });

        // Firefox bug fix
        input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
        input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
    });
}( document, window, 0 ));

It's been a while since I asked this question and below is the method I now use for styling file inputs. This info comes from Codrops. It goes into much more detail and provides several examples but here are the basics:

HTML

 <input type="file" name="file" id="file" class="inputfile" />
 <label for="file">Choose a file</label>

NEED TO CHECK FOR JS

<html class="no-js">
  <head>
      <!-- remove this if you use Modernizr -->
      <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
  </head>
</html>

CSS

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

JS

;( function ( document, window, index )
{
    var inputs = document.querySelectorAll( '.inputfile' );
    Array.prototype.forEach.call( inputs, function( input )
    {
        var label    = input.nextElementSibling,
            labelVal = label.innerHTML;

        input.addEventListener( 'change', function( e )
        {
            var fileName = '';
            if( this.files && this.files.length > 1 )
                fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
            else
                fileName = e.target.value.split( '\\' ).pop();

            if( fileName )
                label.querySelector( 'span' ).innerHTML = fileName;
            else
                label.innerHTML = labelVal;
        });

        // Firefox bug fix
        input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
        input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
    });
}( document, window, 0 ));
回复 原文
~没有更多了~

关于作者

拥抱没勇气

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

西西弗的石头怪

文章 0 评论 0

5397313

文章 0 评论 0

烟沫凡尘

文章 0 评论 0

一个破名字

文章 0 评论 0

萌︼了一个春

文章 0 评论 0

当爱已成负担

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文