Как мне сделать кнопку rails file_field больше?

Question

Я не могу увеличить кнопку file_field в форме рельсов.Его размер в порядке, когда на ноутбуке или дестопе, но не подходит для небольших экранов.Я использую devise для регистрации и сессий, и я установил, где вы можете редактировать формы с помощью пользовательских CSS.

Я попытался добавить к нему имя класса в форме и нацелить на file_field с помощью input {}, но это не изменило его размер.

<div class="profile-pic">
   <%= f.label "Add a profile pic" %><br />
   <%= f.file_field :avatar, class: "select_button" %>
</div><br />

.select_button {
   input {
      width: 400px;
      height: 300px;
   }
 }

Я хак на css, поэтому любые идеи будут оценены.Спасибо!

Answer 1

<%= f.file_field :avatar, class: "custom-file-input" %>

А в CSS:

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

См. https://css -tricks.com / snippets / css / custom-file-input-styling-webkitblink /

Надеюсь, это поможет вам ..