如何编辑CarrierWave的"选择文件"按钮和"没有选择文件"文本的CSS？(Rails4)

Question

我正在使用CarrierWave在我的Rails4教程应用上上传图像.我想编辑按钮的样式和文本"没有选择文件"(参见附图1),但只能编辑输入#image css而不能编辑其中的按钮和文本.我怎么能编辑CSS？它甚至可能吗？

在我的_form.html.erb中,我还尝试使用以下代码来更改标题文本,但它不起作用:

<%= f.file_field :image, title: "Please choose file" %>

Answer 1

另一种选择是隐藏默认文件输入并设置自己的div.然后使用jQuery实现功能.

形成

<%= f.file_field :image, title: "Please choose file", class: "file-picker" %>

CoffeeScript的

displayFile = (object) ->
  file = object.value.split("\\")
  filename = file[file.length-1]
  $("#file-name").text(filename)

$("#file-btn").on "click", ->
  $("#file-picker").click()

$("#file-picker").on "change", ->
  displayFile(this)