Як зробити красиву кнопку завантаження "Виберіть файл" (швидкий рада)
Привіт, шановний відвідувач!
Вчора я додавав можливість завантаження і прикріплення фотографій до коментарів на один цікавий блог (на WordPress звичайно) на прохання автора. Я припускав, що це буде досить просто і швидко. Досить тільки було встановити відповідний плагін (наприклад, Comment Image або Comment Images) і перевірити його працездатність. Технічно, поле для прикріплення фотографії повинно було додатися автоматично через action: comment_form. Але через те, що через нього вже було додано 2 інших плагіна (для підписок на коментарі і просто довідкова кнопка) довелося вбудовувати нове поле вручну через редагування файлу comments.php у встановленій на сайті темі.
І коли поле було вже вставлено, автор попросив зробити кнопку завантаження якось симпатичніше. Я спробував за звичкою просто поміняти значення поля value = "", щоб змінити напис на кнопці. Але цей хід не спрацював. Тому я звернувся до Гуглу за допомогою, і як завжди відповідь була знайдена на stackoverflow. Рішення виявилося просте і елегантне. Дивіться код нижче.
Ось який варіант був спочатку:
1. Я додав пару стилів в style.css.
.uploadButton {display: block; width: 100px; background: # 3df; padding: 10px; color: #FFF; font-size: 16px; font-weight: bold; font-family: Tahoma; text-align: center; border-radius: 10px; cursor: pointer; } .UploadButton: hover {background: # 3ce; }
2. І трохи змінив код кнопки у формі:
<Label for = "uploadbtn" class = "uploadButton"> Завантажити файл </ label> <input style = "opacity: 0; z-index: -1;" type = "file" name = "upload" id = "uploadbtn">
3. Стало так:
PS Якщо вам щось незрозуміло, то, будь ласка, пишіть в коментах нижче. Можливо, я або інші читачеві зможуть допомогти вам.
Успіхів вам у вивченні секретів веб-розробки!
Богдан Григорук
[Прочитайте коменти нижче або напишіть свій ...]