Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

CssImport when using Component Exporter by Mikhail Shabarov, 4 weeks ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

Styling the Upload Button

Iacopo Pace
1 decade ago Jan 27, 2012 1:10pm

Hi everyone,
i'm trying to create an Icon-only button that fits my UI, in order to start a file upload....
I tried the immediate upload, but i cannot seem to change the button into the png image i wanna use for file upload. I tried CSS, but cannot find the classes i have to change, in order to affect just that button.

Anybody managed to do this? Is it even possible?

Thanks!

Iacopo Pace
1 decade ago Jan 27, 2012 2:01pm

Ok, done using css child property, to navigate till the button itself, and setting the size to the img button, background to none! :)

aarthiprasad rathinasami
9 years ago Jan 14, 2013 6:02pm

Can you provide me details on how you fixed the issue..I am facing same problem.

steven spungin
7 years ago May 07, 2015 1:07pm

    // This targets the upload form's v-button.  Put it in the themes scss file. 
    .v-upload .v-button {
        color: red;
    }

     I use this one quite a bit, so the button becomes a 'link'.
    .v-upload .v-button {
        @extend .v-button-link;
    }

+1
n m
6 years ago Jul 29, 2016 4:31am

For those like me who would have enjoyed a little example... :)

In Java :

Upload attachButton = new Upload();
        attachButton.addStyleName("upload-with-icon");
        attachButton.setImmediate(true);
        attachButton.setButtonCaption("");

In css :

service.upload-with-icon {
    height: 100%;
}

service.upload-with-icon div {
    height: 100%;
}

service.upload-with-icon .v-button {
    background-image: url('image/button-icons/attachment.png');
    background-repeat: no-repeat;
    background-size: 23px 19px;
    background-position: center;
}
+3