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

Question

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

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

然而，问题是由于实际输入浮动在按钮上方，我无法使悬停状态起作用。

我接近这个问题了吗？你如何设置上传输入的样式？

Answer 1

在玩了一些之后，我终于通过使input成为Upload按钮元素的子项来实现它。我不得不将上传按钮设为div，因为将input作为button的孩子是不正确的。

See it in action here

Answer 2

如果我理解了这个问题，那就是你想要实现的目标

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

Answer 3

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

您可以使用纯JavaScript来完成。这不是很困难。 但是如果你使用jQuery，它会更容易很多。你有handeling事件的mousemove()功能; height()和width()函数用于计算按钮dimmension; offset functions计算按钮的位置，toggleClass()更改按钮的类别。