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.

Styling the Upload Button

Iacopo Pace
1 decade ago Jan 27, 2012 1:10pm
Iacopo Pace
1 decade ago Jan 27, 2012 2:01pm
aarthiprasad rathinasami
10 years ago Jan 14, 2013 6:02pm
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;
    }

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;
}