给文件上传控件改变样式

使用伪元素给文件上传控件改变样式

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;
}