Как сделать красивую кнопку загрузки "Выберите файл" (быстрый совет)

Привет, дорогой посетитель!

Вчера я добавлял возможность загрузки и прикрепления фотографий к комментариям на один интересный блог (на 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. Стало так:

Новая красивая кнопка загрузки файла "выберите файл"

P.S. Если вам что-то непонятно, то, пожалуйста, пишите в комментах ниже. Возможно, я или другие читателю смогут помочь вам.

 

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

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

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

Ищете хостинг для своего сайта? Могу порекомендовать свой (нажмите здесь)

13 комментариев к “Как сделать красивую кнопку загрузки "Выберите файл" (быстрый совет)”

  1. Павел 21.08.2015 в 17:31 #

    А как сделать вместо кнопки-картинки, текстовую надпись с таким же функционалом.

    • Богдан 17.09.2015 в 12:25 #

      Добрый день, Павел. А это не кнопка-картинка - это текстовая надпись, просто в статье размещен скриншот для демонстрации. Но если вы используете описанный в статье код, то у вас будет текстовая надпись, а не картинка 🙂

  2. Оксана 17.02.2016 в 16:26 #

    Можно спросить, я новичок в этом деле. Мне нужно стилизировать input file. Таблицу стилей я нашла в соих файлах, а вот сам input file, не могу найти. Где можно поискать, что бы отредактировать код. Использую contact form7. Сайт на локальном сервере

    • Богдан 19.02.2016 в 09:55 #

      Здравствуйте, Оксана. Спасибо вам за вопрос.

      Насколько я знаю, вам не нужно менять сам код поля input. Попробуйте просто правильно применить стили и скажите, что у вас получилось.

  3. Оксана 19.02.2016 в 13:48 #

    Здраствуйте. С стилями я разобралась. И как стилизировать саму форму кнопки тоже. Но вот проблемка: у меня сайт на украинском языке. А надпись на кнопке - на русском. Говорять, можно сам input поместить в div, а потом этот див уже стилизовать и назвать на украинском языке. Вот для чего мне нужно в моих файлах найти сам input. Прошу помощи.

    • Богдан 19.02.2016 в 14:18 #

      В таком случае, вам нужно попробовать отредактировать русский перевод плагина ContactForm7. Это можно сделать с помощью плагина Codestyling Localization. Установить его, там в списке доступных переводов выбрать русский перевод плагина ContactForm7 и в нем найти текст на вашей кнопке и поменять. Это проще всего.

  4. Оксана 19.02.2016 в 18:11 #

    Пробовала, в файле .po (для этого плагина) нет таких слов: "обзор" или "файл не выбран". Вот теперь и ищу помощи у специалистов.

    • Богдан 19.02.2016 в 19:17 #

      А вы можете скриншот вашей формы и кнопки стилизованной сделать, загрузить куда-нибудь и указать здесь, чтобы я посмотрел? Просто после применения, того, что я указал в инструкции, у вас уже не должно быть текста "обзор" или "файл не выбран", потому что он скрывается. А стили кнопки берет на себя элемент

  5. Оксана 23.02.2016 в 14:52 #

    http://www.ex.ua/359705603239 Вот какая у меня вышла кнопка. При наведении на нее появляется текст "файл не выбран". Далее вы говорите нужно изменить код, вот поэтому мне нужно найти код моей формы.

    • Богдан 27.02.2016 в 10:06 #

      Думал, как вам помочь. И понял, что вам должна вот такая вот штука помочь, что вам даже не придется код кнопки менять.

      Допустим вот ваш код кнопки:

      <label for="uploadbtn" class="uploadBtnLabel">
      <input type="file" name="upload" id="uploadBtn"></label>
      

      Пропишите для него вот такие стили и у вас будет скрыт ненужный стандартный текст, но будет отображать ваш красивый текст:

      .uploadBtnLabel {
          display: block;
          width: 150px;
          background: #3df;
          padding: 10px;
          color: #FFF;
          font-size: 16px;
          font-weight: bold;
          font-family: Tahoma;
          text-align: center;
          border-radius: 10px;
          cursor: pointer;
      }
      .uploadBtnLabel:hover {
          background: #3ce;
      }
      .uploadBtnLabel #uploadBtn {
        display: none;
      }
      .uploadBtnLabel:before {
        content: 'Загрузить файл';
        display: block;
      }
      

      То есть в отличие от примера в статье, где label находится рядом с кнопкой input,
      мы в данном случае имеем кнопку обернутую в label и поэтому нам нужно скрыть эту кнопку внутри лейбла. А затем с помощью псевдо-элемента :before добавить текст к нашему лейблу.

      • Антон 19.01.2017 в 23:11 #

        Богдан, а не подскажете, пожалуйста, как стилизовать кнопку "Выбрать файл", но оставить поле "Файл не выбран/Или выбран файл такой-то"?

        А то не очень удобно получилось, что этого поля нет, не видно, какой файл выбран...

  6. Сергей 22.02.2017 в 23:29 #

    Спасибо все получилось!
    Единственная проблема, а как сделать так чтоб форма файлы передавала?

    Красивая кнопка есть, но файлы она не передает.
    Нужны какие-то дополнительные настройки в редакторе форм Contact form7

  7. Геннадий 26.02.2017 в 17:24 #

    Добрый день.
    А как сделать, чтобы после выбора файла для загрузки отображалось его название в форме? В примере ведь стандартная кнопка скрывается вместе с надписью "Файл не выбран", куда потом подставляется имя выбранного файла.