如何编辑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)

Answer 2

我所做的是用包含载波波场的div包裹该字段，然后我可以做这样的事情

.carrier-wave-field input {
    color: red; /*or whatever you want to change*/
}