Rails 4: how to apply custom CSS to Rails form file field

Question

I have a Rails 4 app, that uses Rails' default form (I am NOT using Simple Form).

One of my forms allows users to upload an image (thanks to Paperclip):

<td>
  <%= f.file_field :image, value: "Choose a file" %>
</td>

I would like to style the "choose a file button" with custom CSS.

I tried to apply an id to my td, as follows:

<td id="upload_image">
  <%= f.file_field :image, value: "Choose a file" %>
</td>

and then I tried to style it with the following CSS code:

#upload_image input {
    background-color: #2c3e50;
    background-image: none;
    border: none;
    color: #FFF;
    padding: 5px 10px 5px 10px;
}

But this resulted in styling the td itself:

And I still get this ugly button with the default style.

—————

UPDATE: if styling the button itself is not possible, I would like to at least put the "no file chosen" label ("aucun fichier choisi" in French) under the button, since at the moment it is taking a lot of horizontal room on my page).

Is that even possible?

—————

How can I make this work?

Answer 1

This works:

<%= f.file_field :source, :class => "ui pink button" %>

As does:

<%= f.file_field :source, class: "ui purple button" %>

You can apply styling this way. But again this, the clickable part is still going to be the default grey and say "Choose File". Aside from that, keep in mind the HTML file field is one of the least customizable up to you how much effort you want to expend trying to.