html - 样式化上传字段

Question

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

火狐 7:

• CSS3 圆 Angular (确定)
• 文字阴影(确定)
• 手形光标只出现在标签的下半部分(不行，我希望手形光标悬停在标签的任何一点上都应该可见)

IE 8:

• 没有圆 Angular (看起来更糟，但还可以)
• 没有文字阴影(没问题，我知道不支持它)
• 手形光标只出现在标签的下半部分(不行，我希望手形光标悬停在标签的任何一点上都应该可见)
• 点击标签的上半部分文件上传对话框不显示(不行，我希望通过点击标签的任意点打开对话框，就像 FF)
• 点击后会出现一个闪烁的光标(很奇怪，但谁会在乎这个)

有人有想法吗？

更新:根据收到的输入，here is another approach in jsfiddle :我构建了一个按钮，并绑定(bind)了按钮的点击事件，以将点击事件发送到文件上传输入。

这里是一些兼容性测试:

• 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 添加到您的输入规则......瞧

.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;
}