Вёрстка: Стилизация кнопки выбора файла
Базовый пример CSS, который можно использовать для стилизации кнопки выбора файла:
.fileUploadWrapper { position: relative; overflow: hidden; display: inline-block; } .fileUploadInput { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .fileUploadButton { border: 2px solid #007bff; color: white; background-color: #007bff; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold; } .file-upload-button:hover { background-color: #0056b3; }
HTML-код для использования этого стиля:
<div class="fileUploadWrapper"> <input type="file" class="fileUploadInput" /> <span class="fileUploadButton">Выбрать файл</span> </div>
Комментарии