How to edit the CSS of CarrierWave's 'Choose file' button and "No file chosen" text? (Rails4)

Question

I'm using CarrierWave to upload images on my Rails4 tutorial app. I would like to edit the styling of the button and text "no file chosen" (see attached image 1), but can only edit the input#image css and not the button and text inside it. How could I edit the CSS? Is it even possible?

In my _form.html.erb I also tried the following code to change the title text, but it didn't work:

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

Answer 1

What I do is I wrap the field with a div with the class carrier-wave-field, then I can do something like this

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

Answer 2

Another option is to hide the default file input and style a div of your own. Then implement functionality with jQuery.

Form

<%= 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)