Thibaud Clement Thibaud Clement - 2 years ago 126
CSS Question

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

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):

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

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

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

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

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

enter image description here

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download