Rails file_field вводится как кнопка - PullRequest
Новая
       7

Rails file_field вводится как кнопка

2 голосов
/ 15 марта 2019

У меня есть кнопка, которую я хочу выполнить действие, сгенерированное file_field в Rails. Вот код erb, который у меня есть сейчас: 

<label for='file-input'>
  <span class='btn btn-success' style='max-width: 300px;'>
    <img src=<%= image_path('button-upload-white.svg')%>></img> Upload from computer
  </span>
</label>

<%= f.file_field :files, multiple: true, name: 'attachment[file]', id: 'file-input'%>

Я следовал шаблону в этом вопросе с ассоциированным CSS: 

.file-input > input
{
 display: none;
}

.file-input > label{
  cursor: pointer;
}

но, похоже, он не работает и генерирует следующее:

not desired

Желаемый выходной сигнал будет таким же, как и вход choose files, скрытый или каким-либо образом связанный с самой кнопкой. Спасибо, пожалуйста, дайте мне знать, если я должен опубликовать больше кода, или я думаю об этом неправильно.

1 Ответ

0 голосов
/ 15 марта 2019

Попробуйте «спрятать» элемент ввода

Ширина и высота установлены на 0,1px вместо 0px. Установка значений свойств в ноль приводит к тому, что в некоторых браузерах элемент теряет вкладку. И положение: абсолютное гарантирует, что элемент не мешает элементам родного брата. 

  .file-input > input {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }

Кредит

...