Display
Display

Reputation: 89

Modifying the appearance of file upload buttons in ruby on rails or CSS

The title says it all. How do you go about doing this? For example, editing the width of a file upload button results in this: https://i.sstatic.net/kNkC9.png For comparison, here's an ordinary file upload button: https://i.sstatic.net/ZrDiW.png

The red rectangle represents the area the button normally takes up. In addition, when you hover your cursor over that spot (except for where the red and blue rectangles overlap), your cursor will transform into a hand icon, indicating that something will happen when you click that area. However, nothing happens.

The blue rectangle represents what portion of the screen you can click (which is mostly invisible, and much smaller than usual) to make the file upload form appear.

Trying to edit the file upload button's height yields similar results, only vertically instead of horizontally.

For the sake of explaining what my goal is: I'd like to overly a transparent or invisible file upload button on top of user avatars on my website. So far I've pulled off the easy parts, making the file upload button transparent and overlaying it on top of a user's avatar, but I haven't figured out how to edit the usable dimensions of the file upload button. For a working example of this, if you have a facebook profile, go to your profile and hover your mouse over your avatar. The words "Update Profile Picture" will appear and you can click them to edit your avatar directly from your profile instead of having to go to a separate settings page.

Upvotes: 0

Views: 3990

Answers (2)

avr-girl
avr-girl

Reputation: 557

I did it with an after element and an icon from FontAwesome

# your-page.html.erb

<div>
    <label class="button-image">
      <%= f.file_field :attachment, value: "", class: "active-storage-button" %>
    </label>
</div>

# app/assets/stylesheets/your-page.scss

.button-image:hover::after {
    content: "\f196";
    font: normal normal normal 100px/1 FontAwesome;
    color: #778899;
    padding: 10%;
    right: 10%;
    position: relative;
}

.active-storage-button{
    display: none;
}


# for hover effect
.button-image:hover::after {
    color: #5a5a5a;
    cursor: pointer;
}

Upvotes: 0

aBadAssCowboy
aBadAssCowboy

Reputation: 2520

You can't style the file upload buttons, they are native to the browser and rendered differently in different browsers. All those styles file upload buttons are not actual file upload buttons but are simulating the file upload button's behaviour.

There are different approaches to this using CSS and Javascript. Most of them involve hiding the native button and placing a custom button on top it using position: absolute and opacity CSS properties and simulating the click on native button when clicked on the custom button.

As there are quite some solutions on the web to this, I will refer you to those instead of posting a solution here.

See below:

Upvotes: 2

Related Questions