Привіт, шановний відвідувач!

Вчора я додавав можливість завантаження і прикріплення фотографій до коментарів на один цікавий блог (на 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 Якщо вам щось незрозуміло, то, будь ласка, пишіть в коментах нижче. Можливо, я або інші читачеві зможуть допомогти вам.

Успіхів вам у вивченні секретів веб-розробки!

Богдан Григорук

[Прочитайте коменти нижче або напишіть свій ...]