我对输入类型文件按钮的样式有疑问。 由于我无法设置文件输入按钮的样式,我可以创建一个div,我可以按照我想要的样式,当我单击它时,它会触发打开浏览窗口的输入类型按钮吗?如果有,任何建议如何做? 谢谢。
答案 0 :(得分:3)
是的,你可以,这是用于样式文件输入的最常用的 hacks 之一。
答案 1 :(得分:2)
可能是你可以隐藏输入元素并使用div来进行样式设计..
<input type="file" id="myFileInput" onchange="$('#myFileDiv').text($(this).val());" style="display:none;" />
<div id="myFileDiv" onclick="$('#myFileInput').click();">
Select File..
</div>
答案 2 :(得分:1)
您可以仅使用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">