我想尝试设计这个:
<input type="file" multiple>
我想要的:我想改变它的颜色,也改变它的大小...
文件类型是本机元素,从此您无法更改它的外观。相反,您可以隐藏在某个元素的后面。
<div>
Choose File
<input type="file" class="hide_file">
</div>
div{
padding:5px 10px;
background:#00ad2d;
border:1px solid #00ad2d;
position:relative;
color:#fff;
border-radius:2px;
text-align:center;
float:left;
cursor:pointer
}
.hide_file {
position: absolute;
z-index: 1000;
opacity: 0;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
font-size: 24px;
width: 100%;
}
参考这里
您可以简单地在 CSS 中使用
::-webkit-file-upload-button
并设置“选择文件”按钮的样式。
您可以使用样品
`https://jsfiddle.net/gabrieleromanato/mxq9R/`
更改输入文件的样式。
input[type='file']{
color:blue;
font-size:25px;
}
您可以隐藏它,然后用另一个按钮单击它:
<input type="file" style="display:none" id="inpFile">
<button onclick="document.getElementById('inpFile').click()">Select File</button>
然后您可以根据需要设置
<button>
的样式。