如何使rails file_field按钮更大？

Question

我似乎无法以rails形式使file_field按钮变大。在笔记本电脑上或停车时，它的大小还可以，但在较小的屏幕上效果不佳。我正在使用devise进行注册和会话，并且将其设置为可以在其中使用自定义CSS编辑表单的地方。

我尝试在表单中添加一个类名，并使用输入{}定位file_field，但是它的大小没有改变。

<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/

希望它能对您有所帮助。