如何使用CSS设置上传输入的样式？

为了保护用户，您无法真正使用CSS来上传样式。因此，解决方案就是隐藏真正的上传并向用户显示一些看起来如何的其他元素。如何使用CSS设置上传输入的样式？

I started a JSFiddle显示了如何通过简单的按钮或其他东西掩盖无形的真实上传，以便您可以设置按钮样式 - 但仍然可以让用户单击上传输入。

但是，问题是我不能让悬停状态工作，因为实际输入浮动在按钮上方。

我接近这个问题错了吗？你如何上传输入风格？

来源

2011-12-14 Xeoncross

在玩了一段时间后，我终于通过使input成为Upload按钮元素的一个子元素而工作。我不得不将上传按钮设为div，因为input作为button的孩子是不正确的。

See it in action here

来源

2011-12-15 18:11:49 Xeoncross

如果我理解这个问题，这是你要实现

jsfiddle.net/yVFWJ/1/

.button { 
    width: 47px; 
    height: 19px; 
    cursor: pointer; 
    text-indent: -9999px; 
    border: none; 
    background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif); 
}

来源

2011-12-14 19:51:22 Shepherd

嗯，这确实替换为自定义图片的背景 - 但图像没有反应。也许我需要[添加悬停状态]（http://jsfiddle.net/Xeoncross/yVFWJ/5/），使其成为一个完美的工作示例。然而，[我也试过]（http://jsfiddle.net/Xeoncross/yVFWJ/2/），所以我可以使用CSS和文本，而不是图像。 – Xeoncross 2011-12-14 20:36:26

唔...你可以使用document.onmousemove事件是什么。在那里你可以检查你的鼠标位置是否在按钮区域内。如果是，只需将按钮类改为例如“send_button_hover”。如果不是，请将该类更改为“send_button”。

你可以使用纯JavaScript来做到这一点。这并不困难。但是，如果您使用jQuery，它更容易lot。对于handeling事件你有mousemove()函数; height()和width()用于计算按钮暗度; offset functions来计算按钮的位置和toggleClass()来改变按钮的类别。

来源

2011-12-14 19:57:28

如何使用CSS设置上传输入的样式？

回答

相关问题