使选择文件按钮看起来像一个div

Question

我有一个文件提交表单，我想改变按钮的外观。以前，我已经这样做了，将表单输入包装到div中，然后使用CSS使div看起来像某种方式。

但是，它似乎不适用于文件提交按钮#myFile。它只是将按钮放在div中。而提交按钮看起来我希望它看起来如何。有任何解决这个问题的方法吗？我想选择文件按钮看起来像提交按钮。只是文字，没有灰色椭圆形。

<form id="dataform" action="submit" method="post" enctype="multipart/form-data">
    <div id="btn_upload_data">
        <input type="file" name="myfile" id="myFile"/>
    </div>
    <div id="btn_sub_data">
        <input type="submit" id="data_submit" value="Submit File"/>
    </div>
</form>

一些CSS：

div#btn_upload_data input {
cursor:pointer;
padding-top:40px;
padding-bottom:60px;
width:130px;
height:0px;
background-color:#a6e79b;
border: none;
text-align:center;
display:inline-block;
float:left;
white-space: pre-wrap;    
}

Answer 1

尝试使用

#btn_upload_data input[type="file"] {
  opacity: 0;
  filter: aplha(opacity=0);
}

然后将文本放在div中作为选择文件。

<div id="btn_upload_data" title="No File Chosen"> // if title needed
    <input type="file" name="myfile" id="myFile"/>
    Choose File...
</div>

没有其他的编辑方式。它是预定义的输入类型文件的样式。这是由操作系统本身设定的。所以你不能编辑它！你需要完全覆盖它。