Как сделать форму загрузки?

Question

Как сделать подобную форму загрузки? Чтобы input для загрузки файла выглядит следующим образом

У меня пока получилось вот так

Что вообще не то. Помогите пожалуйста

.upload-form {
  margin: auto;
  max-width: 432px;
  width: 100%;
  height: 100%;
  font-size: 16px;
  display: block;
  line-height: 1.5;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #333;
}

.upload-form input {
  width: 100%;
  margin: 2px 0;
  border: 1px solid #ccc;
  padding: 7px 16px;
  border-radius: 4px;
  outline: none;
}

.upload-form label {
  margin: 0 0 2px;
  font-weight: normal;
  color: #525252;
}

.upload-form span {
  line-height: 1.43;
  margin: 2px 0;
  font-size: 14px;
}

.upload-form .upload {
  padding: 24px 16px 32px;
  background-color: #f5f7fa;
  border: solid 2px #c6dbfb;
  border-radius: 4px;
  align-items: center;
  text-align: center;
  margin-bottom: 16px;
}

<div class="wrapper">
  <div class="page-header">
    <h1>Загрузка презентации на сайт</h1>
  </div>
  <form asp-action="Upload" enctype="multipart/form-data" method="post" class="upload-form">
    <p>Опубликуйте презентацию в формате ppt или pptx.</p>
    <div class="upload">
      <img class="center-block" src="~/images/icons/upload.svg" />
      <p>Перенести вручную с компьютера в это место или</p>
      <input type="file" name="file" value="file" />
    </div>
    <label>Email</label>
    <input type="text" name="email" />
    <span>Отправим ссылку на загруженную презентацию на email</span>
    <button type="submit" class="ss-button ss-button-primary" value="email">Опубликовать</button>
  </form>
</div>

Answer 1

Сам инпут, конечно, стилизовать не получится, но его можно скрыть, а нужные стили задать лейблу этого инпута:

input#my-file {
  display: none;
}
label[for="my-file"] {
  display: block;
  background-color: #e1ebfa;
  color: #1858b9;
  font-family: sans-serif;
  font-weight: bold;
  width: 180px;
  text-align: center;
  border-radius: 3px;
  padding: 12px 0;
  margin: 20px auto;
}

<input type="file" id="my-file">
<label for="my-file">Выбрать файл</label>

Answer 2

Предложу такой вариант "кнопки" для выбора файлов...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.input-file {
    position: relative;
    display: inline-block;
}
.input-file span {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    font-size: 14px;
    vertical-align: middle;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    background-color: #419152;
    line-height: 22px;
    height: 40px;
    padding: 10px 20px;
    box-sizing: border-box;
    border: none;
    margin: 0;
}
.input-file input[type=file] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    display: block;
    width: 0;
    height: 0;
}
 
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
    <label class="input-file">
        <input type="file" name="file">
        <span class="input-file-btn">Выберите файл</span>           
    </label>
</form>
</body>
</html>

БЛОГ НА HUSL

Как сделать форму загрузки?

Ответы (2 шт):