1

我对输入类型文件按钮的样式有疑问。由于我无法设置文件输入按钮的样式，我可以制作一个可以设置我想要的样式的 div，当我单击它时，它会触发打开浏览窗口的输入类型按钮？如果是，有什么建议怎么做？谢谢你。

4

3 回答 3

3

是的，你可以，这是样式文件输入最常用的技巧之一。

看看http://www.quirksmode.org/dom/inputfile.html

于 2012-12-16T10:27:28.187 回答
3

可能您可以隐藏输入元素并使用 div 进行样式设置..

<input type="file" id="myFileInput" onchange="$('#myFileDiv').text($(this).val());" style="display:none;" />
<div id="myFileDiv" onclick="$('#myFileInput').click();">
    Select File..
</div>
于 2012-12-16T12:06:17.180 回答
3

您可以仅使用 css 设置文件输入的样式

label[for="file-input"] {
  display: block;
  margin-bottom: 1em;
  font-size: 1em;
  color: #fff;
  opacity: .9;
  font-weight: bold;
}

input[type="file"] {
  cursor: pointer !Important;
}
input[type="file"]::-webkit-file-upload-button {
  border: none;
  padding: 5px 12px;
  background: #9e2baf;
  color: #fff;
  font-size: 1em;
  transition: all .4s;
  cursor: pointer;
  border-radius: 20px;
}
input[type="file"]::-ms-browse {
  border: none;
  padding: 5px 12px;
  background: #9e2baf;
  color: #fff;
  font-size: 1em;
  transition: all .4s;
  cursor: pointer;
  border-radius: 20px;
}
                     <label class="file-label" for="input-file">Attach file:</label>
                     <br /> <input type="file" name="attachment[]"  multiple="multiple">

于 2018-06-27T20:01:29.477 回答