我在设置输入按钮时遇到问题？

Question

我有一个按钮，用于设置用户文件输入的样式。我已经搜索过StackOverflow，以及Google搜索结果寻找解决方案。我无法找到任何不涉及javascript或使用背景图片来解决问题的内容。

我非常接近我认为的解决方案。我有按钮的div，然后我可以将输入重叠到按钮上。这个问题是我无法将文字放到按钮上。这是我用过的代码：

<form enctype="multipart/form-data" method="post" action="" class="form_container">
    <div class="image_upload_link">
        <input type="file" name="profile_picture" id="image_input" placeholder="Test">
        <div class="file_label">Upload a Picture</div>
    </div>
</form>

在此示例中，您可以单击按钮，然后会出现文件对话框，但按钮的标签位于按钮本身下方。

所以我切换了<input>和<div class="file_label">的位置。然后我有一个按钮，里面有一个标签，但是输入在按钮下面。这就是我在这个例子中所拥有的：http://jsfiddle.net/As8Vc/1/

如何有一个既可以包含标签又可以包含输入的按钮？我已经尝试过使用z-index属性，但没有运气。

Answer 1

尝试将margin-top: -24px;用于课程div.image_upload_link input

希望这能解决您的问题。