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

样式<输入类型=“文件”>

发布于 2024-10-08 20:53:41 字数 284 浏览 2 评论 0 原文

可能的重复：
设置输入类型=“文件”按钮的样式

我试图设置样式，

<input type="file">

但我运气不太好。我想让文本框消失并只保留按钮。我该怎么做呢？

原文

Possible Duplicate:
Styling an input type=“file” button

I was trying to style 

<input type="file">

but i have not had much luck. I want to make the textbox disappear and only keep the button. How can I do it?

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

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

发布评论

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

评论（5）

征﹌骨岁月お 2024-10-15 20:53:41

CSS 方式（基本代码位于此处）：

<html>
    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

    <div class="fileinputs">
        <input type="file" class="file" />

        <div class="fakefile">
            <input type="button" value="Select file" />
        </div>
    </div>
</html>

The CSS way (base code found here):

<html>
    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

    <div class="fileinputs">
        <input type="file" class="file" />

        <div class="fakefile">
            <input type="button" value="Select file" />
        </div>
    </div>
</html>
回复 原文
临风闻羌笛 2024-10-15 20:53:41

没有简单的跨浏览器方法来设置文件输入类型的样式。因此存在甚至使用 javascript 的解决方案。

这是一个 jQuery 插件，您可以使用它以跨浏览器的方式设置文件类型的样式：

浏览器不允许您设置样式文件
输入。文件样式插件修复了这个问题
问题。它使您能够使用图像
作为浏览按钮。你还可以设计风格
文件名字段作为普通文本字段
使用CSS。它是用
JavaScript 和 jQuery。

您可以在此处查看演示

正如流行的 ajaxian.com 上发布的那样，您也可以看看这个：

肖恩·英曼有一个可爱的小
允许您设置文件样式的 hack
使用 CSS 和 DOM 输入。

这些元素是出了名的痛苦
来处理，现在我们选择
盒装在 IE 上玩得很好，我们需要
还有其他需要解决的问题:)

There is no easy cross-browser way to style the input type of files. Therefore there exist solution that even use javascript.

Here is a jQuery plugin you can use to style file types in the cross-browser fashion:

Browsers do not let you style file
inputs. File Style plugin fixes this
problem. It enables you to use image
as browse button. You can also style
filename field as normal textfield
using css. It is written using
JavaScript and jQuery.

You can check out the demo here

As also posted on popular ajaxian.com, you can take a look at this too:

Shaun Inman has got a lovely little
hack that allows you to style file
inputs with CSS and the DOM.

These elements are notoriously painful
to deal with, and now we have select
boxed playing nice on IE, we need
something else to fix up :)

回复 原文
×眷恋的温暖 2024-10-15 20:53:41

我编写了这个 jQuery 插件，以便更简单地设置文件输入的样式。使用 CSS 和“假元素”来获得您想要的结果。

http://github.com/jstnjns/jquery-file

希望有帮助！

I wrote this jQuery plugin to make it much simpler to style the file input. Use CSS and "fake elements" to get the results you want.

http://github.com/jstnjns/jquery-file

Hope that helps!

回复 原文
一个人练习一个人 2024-10-15 20:53:41 
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">

<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
回复 原文
蛮可爱 2024-10-15 20:53:41

某些浏览器需要文件输入可见并手动单击浏览按钮，否则它将不会向服务器提交任何内容。所以我建议 Saefraz 的第一个解决方案：File Style Plugin for jQuery

some browsers need File input visible and click the browse button manually, or it will submit nothing to server. so i suggest Saefraz's first solution: File Style Plugin for jQuery

回复 原文
~没有更多了~

关于作者

初熏

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

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

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

更多

友情链接

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