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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Styling the Upload Button
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!
Ok, done using css child property, to navigate till the button itself, and setting the size to the img button, background to none! :)
Can you provide me details on how you fixed the issue..I am facing same problem.
// 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;
}
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;
}