Для создания поля "прикрепить скриншот" в HTML и CSS вы можете использовать элемент <input> с атрибутом type="file". Вот пример:
Прикрепить скриншот
.upload-btn {
position: relative;
overflow: hidden;
display: inline-block;
}
.upload-btn input[type="file"] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.upload-btn button {
padding: 10px 20px;
background-color: #2196f3;
color: #fff;
border: none;
cursor: pointer;
}
Прикрепить скриншот
В этом примере мы задаем для контейнера с кнопкой (<div class="upload-btn">
![Wink ;) ;)](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
свойство position: relative;, чтобы вложенные элементы могли быть позиционированы относительно этого контейнера. Затем мы создаем кнопку <button> и скрываем нативное поле <input type="file">, задав ему нулевую прозрачность (opacity: 0
![Wink ;) ;)](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
и позиционирование position: absolute;. Когда пользователь кликает на кнопку, срабатывает выбор файла.
Обратите внимание, что обработка отправки файла на сервер для сохранения нуждается в веб-серверной технологии, такой как PHP, Node.js или другие. В этом ответе не рассматривается обработка отправленных данных.