html - 使选择文件按钮看起来像一个 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>

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