使用伪元素给文件上传控件改变样式
IE10+浏览器使用的是::-ms-browse伪元素,可以改变按钮模样部分的边框、背景色、高度等,Chrome下使用的伪元素为::-webkit-file-upload-button。
html body
<form>
<p class="file">
<label for="file-input">Upload your image</label>
<input id="file-input" type="file" name="file-input" />
</p>
</form>
css样式
input[type="file"]::-webkit-file-upload-button {
background: #E62163;
border: none;
padding: .5em 1em;
color: #fff;
border-radius: .2em;
}
input[type="file"]::-ms-browse {
background: #E62163;
border: none;
padding: .5em 1em;
color: #fff;
border-radius: .2em;
}
不使用伪元素
html body
<form>
<p class="file">
<input id="file-input" type="file" name="file-input" />
<label for="file-input">Upload your image</label>
</p>
</form>
css样式
.file {
position: relative;
}
.file input {
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
.file label {
background: #39D2B4;
padding: 5px 20px;
color: #fff;
font-weight: bold;
font-size: .9em;
transition: all .4s;
}
.file input[type="file"]:hover + label,
.file input[type="file"]:focus + label {
background: #34495E;
color: #39D2B4;
}