html Стилизациякнопки“Загрузитьфайл”

Posted 2021-05-10

<style>
body{
  padding: 100px;
}

.inputfile {
  width: 0.1px;
  height: 0.1px;
	opacity: 1;
 	overflow: hidden;
	position: absolute;
z-index: -1;
}
.inputfile + label {
    font-size: 1.25em;
    padding: 10px;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}
.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}
.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}
.inputfile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
	pointer-events: none;
}
  </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple placeholder="Add profile picture"/>

<label for="file">Choose a file</label>

<script>
$("[type=file]").on("change", function(){
  // Name of file and placeholder
  var file = this.files[0].name;
  var dflt = $(this).attr("placeholder");
  if($(this).val()!=""){
    $(this).next().text(file);
  } else {
    $(this).next().text(dflt);
  }
});
</script>