输入类型=文件仅显示按钮

问题描述

是否有一种风格（或脚本）< input type = file /> 元素只有浏览按钮没有文本字段？ p>

感谢

编辑：
为了说明为什么我需要。我使用的多文件上传代码来自，它不需要输入文本字段，因为它从来没有值。脚本只是将新选择的文件添加到页面上的集合。

解决方案

我有一个时间试图完成这个。我不想使用Flash解决方案，我看过的所有jQuery库都不可靠的所有浏览器。

我想出了自己的解决方案，完全在CSS中实现（除了onclick样式更改以使按钮显示为clicked）。

您可以在这里尝试一个工作示例： strong> （在FF 7，IE 9，Safari 5，Opera 11和Chrome 14）

它可以创建一个大文件输入（font-size：50px），然后将其包装在一个固定大小的div ：隐。输入只能通过此窗口div可见。 div可以赋予背景图像或颜色，可以添加文本，并且可以使输入透明以显示div背景：

HTML：

 < div class =inputWrapper> 
< input class =fileInputtype =filename =file1/> 
< / div> 
  

CSS：

  .inputWrapper {
 height：32px; 
 width：64px; 
 overflow：hidden; 
 position：relative; 
 cursor：pointer; 
 / *使用背景颜色，但您可以使用背景图像来表示按钮* / 
 background-color：#DDF; 
} 
 .fileInput {
 cursor：pointer; 
 height：100％; 
 position：absolute; 
 top：0; 
 right：0; 
 z-index：99; 
 / *这使得按钮巨大。如果你想要一个更大的按钮，增加字体大小* / 
 font-size：50px; 
 / *所有浏览器的不透明度设置* / 
 opacity：0; 
 -moz-opacity：0; 
 filter：progid：DXImageTransform.Microsoft.Alpha（opacity = 0）
} 
  

让我知道如果有任何问题，我会尽力解决它们。

Is there a way to style (or script) <input type=file /> element to have visible only "Browse" button without text field?

Thanks

Edit:Just to clarify why to I need this. I'm using multi file upload code from http://www.morningz.com/?p=5 and it doesn't need input text field because it never has value. Script just adds newly selected file to collection on page. It would look much better without text field, if it's possible.

解决方案

I was having a heck of a time trying to accomplish this. I didn't want to use a Flash solution, and none of the jQuery libraries I looked at were reliable across all browsers.

I came up with my own solution, which is implemented completely in CSS (except for the onclick style change to make the button appear 'clicked').

You can try a working example here: http://jsfiddle.net/VQJ9V/307/ (Tested in FF 7, IE 9, Safari 5, Opera 11 and Chrome 14)

It works by creating a big file input (with font-size:50px), then wrapping it in a div that has a fixed size and overflow:hidden. The input is then only visible through this "window" div. The div can be given a background image or color, text can be added, and the input can be made transparent to reveal the div background:

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

Let me know if there are any problems with it and I'll try to fix them.

这篇关于输入类型=文件仅显示按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！