Question

我正在尝试设置上传字段的样式，我已经花了很多时间尝试修复它而没有成功。我已经创建了一个简单的jsfiddle来演示问题（如果您正在阅读快速阅读只读粗体要点）。

Firefox 7 ：

CSS3圆角（确定）
文字阴影（ok）
手形光标只出现在标签的下半部分（不好，我希望手形光标在标签的任何一点都可见）

IE 8 ：

没有圆角（看起来更糟，但没关系）
没有文字阴影（没问题，我知道没有支持）
手形光标只出现在标签的下半部分（不好，我希望手形光标在标签的任何一点都可见）
单击标签的上半部分，文件上传对话框不显示（不行，我希望通过单击标签的任何一点打开对话框，如FF）
点击它后出现一个闪烁的光标（很奇怪，但是他们关心的是这个）

有人有想法吗？

更新：根据收到的输入，here is another approach in jsfiddle：我构建一个按钮，然后绑定按钮的click事件，将click事件发送到文件上传输入。

以下是一些兼容性测试：

IE 6 WinXP：正常工作
IE 7 WinXP：正常工作
IE 8 Win7：正常工作
FF 7 Linux：正常工作
FF 8 Win7：工作
Opera 11 Win7 / Linux：不起作用
Chrome 15 Win7 / Linux：不起作用
Safari 3.1 MacOSX：不起作用

更新2 ：越来越近了，在jsfiddle我投入了一些浏览器测试，在MSIE或Mozilla的情况下，我使用新方法，否则使用旧方法。

IE 6 WinXP：正常工作
IE 7 WinXP：正常工作
IE 8 Win7：正常工作
FF 7 Linux：正常工作
FF 8 Win7：工作
Opera 11 Win7 / Linux：不起作用
Chrome 15 Win7 / Linux：正常工作
Safari 3.1 MacOSX：正常工作

所以我猜Opera因为z-index而无法工作，将在下一个版本中修复它。

更新3 ：new version也适用于Opera。 Opera标签高度降低，因此标签的所有区域都是可点击的。所以现在它适用于我关心的所有浏览器，并且它在外观上是可以接受的。问题解决了。

Answer 1

IE 8：

将z-index添加到输入规则中.. voila

.file-upload input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    font-size: 12px;
    opacity: 0;
    filter: alpha(opacity=0.0);
    z-index:-1;
}

编辑：使用以下css ...

更容易看到FF中发生了什么

.file-upload {
    overflow: hidden;
    display: inline-block;
    position: relative;    
    vertical-align: middle;
    text-align: center;
    color: #fff;
    border: 2px solid #707070;
    background: #A0A0A0;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    text-shadow: #000 1px 1px 4px;
    cursor:pointer;
}

.file-upload:hover {
    background: #2FA2FF;
}
.file-upload.focus {
    outline: 2px solid yellow;
}

.file-upload input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    height: 38px;
    font-size: 12px;
    -moz-opacity:50;
    filter: alpha(opacity=0);
    opacity: 50;
    z-index:2;
    cursor:pointer;
}

.file-upload span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    padding-top: .45em;
    z-index:1;
}

.file-upload { height: 38px; }
.file-upload,
.file-upload span { width: 160px; }    

.file-upload-status {
    margin-left: 10px;
    vertical-align: middle;
    padding: 7px 11px;
    font-weight: bold;    
    font-size: 16px;
    color: #888;
    background: #f8f8f8;
    border: 3px solid #ddd;
}

Answer 2

我要回答我的问题，因为其他答案是部分解决方案，并不适用于所有浏览器。特别是我支持MacOSX上的IE 6，IE 7，IE 8，Chrome 15，Opera 11，FF 7，FF 8，Safari 3.1。最有可能它也适用于其他浏览器，但这是我可以测试的，因为我已经在我的计算机和虚拟机上。

最后，我的客户选择了smaller and more sober version。新版本还提供更短的HTML，JavaScript和CSS。

HTML

<form enctype="multipart/form-data" method="POST" action="">
    <div class="fileupload-buttonbar">       
    </div>
</form>

<强> CSS

.file-upload {
    overflow: hidden;
    display: inline-block;
    position: relative;    
    vertical-align: middle;
    text-align: center;
    color: #fff;
    background: #5A5A5A;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor:pointer;
    font-size: 8.5px;
    font-family: Arial;
}

.file-upload:hover {
    background: #808080;
}

.file-upload input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index:2;
}

.file-upload { height: 14px; width: 115px; }

<强>的JavaScript

var html = '';
if ($.browser.mozilla || $.browser.msie) {
    html = '<input type="button" class="file-upload" '
        + 'value="SCEGLI FOTO..."/><input id="uploadfile" '
        + 'name="uploadfile" multiple="" type="file"/>';
    $('.fileupload-buttonbar').html(html);
    $('#uploadfile').hide();
    $('.file-upload').click(function () {
        $('#uploadfile').click();
    });
} else {
    html = '<label class="file-upload"><span>SCEGLI FOTO...</span> '
        + '<input name="uploadfile" multiple="" type="file"/></label>';
    $('.fileupload-buttonbar').html(html);
}

Answer 3

所以，我的建议是你隐藏你的输入文件并使用另一个对象，如图像或程式化的输入文本来获得你想要的，对吧？这个非常简单的代码解释了我在说什么：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Teste</title>

    <script type="text/javascript">
    function File()
    {
        var f = document.getElementById("file");
        f.click();
        document.getElementById("file_path").value = f.value; 
    }

    function ReturnFile(f)
    {
        document.getElementById("file_path").value = f.value;
    }
    </script>
</head>

<body>

<input type="file" id="file" onchange="ReturnFile(this)" /><br /><br />

<input type="button" onclick="File()" value="Send a file..." />
<div onclick="File()">Send a file...</div>
<a href="javascript: void(0)" onclick="File()">Send a file...</a><br />
<img src="your_image.png" onclick="File()" alt="Send a file..." /><br /><br />

<input type="text" id="file_path" />

</body>
</html>

请注意，具有click事件的对象是您的按钮，带有id'file_path'的文本输入返回文件输入的相同值。因此，当隐藏文件时，您使用文本输入或whatelse向用户显示文件。

另一个重要的事情是，在File函数的第三行，它将文件输入的值设置为文本输入。但它仅适用于IE，因为它会在click事件被触发时停止并等待用户返回。其他浏览器不会等待并通过它。所以我在文件输入上放了onchange事件，以便在其他浏览器上执行相同的工作。

希望它可以帮助你...

设置上传字段的样式

3 个答案: