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.
Add backgroud color to all inputs
Hello,
does it exist a way to give all inputs with given style given background color?
To be more concrete: I'd like all fields with style "changed-field":
field.addStyleName("changed-field");
have special background independently on the type of field.
Following css:
.changed-field {
background: #ff84ff;
}
works for text fields as well as checkboxes, but doesn't work for comboboxes nor for date fields.
Thanks in advance
Agata
Hey Agata,
You can tweak input fields (TextFields, ComboBoxes, DateFields) with $v-textfield-background-color.
$v-textfield-background-color: blue;
@import "../valo/valo.scss";
@mixin <your-theme> {
@include valo;
}
This won't affect checkboxes though.
Thanks Joacim, but it affects all fields, not only the ones with special style.
Hi Agata,
you can include valo style-mixins to generate all styles according to your givin parameters. (e.g. $background-color)
Java:
TextField field = new TextField("no background");
TextField fieldWithBackground = new TextField("has background");
fieldWithBackground.addStyleName("green");
DateField dateField = new DateField("no background");
DateField dateFieldWithBackground = new DateField("has background");
dateFieldWithBackground.addStyleName("green");
ComboBox comboBox = new ComboBox("no background");
ComboBox comboBoxWithBackground = new ComboBox("has background");
comboBoxWithBackground.addStyleName("green");
mytheme.scss:
@import "../valo/valo.scss";
@mixin mytheme {
@include valo;
.v-textfield-green{
@include valo-textfield-style($background-color: #006b02);
}
.v-filterselect-green{
@include valo-combobox-style($background-color: #006b02);
}
.v-datefield-green{
@include valo-datefield-style($background-color: #006b02);
}
}
For more parameters / mixins / variables take a look at the valo api -> Valo API
best regards
Johannes
Agata Vackova: Thanks Joacim, but it affects all fields, not only the ones with special style.
True. You can also do:
ComboBox cb = new ComboBox();
DateField df = new DateField();
cb.addStyleName("green");
df.addStyleName("green");
.v-filterselect.green [class*="input"] {
background-color: green;
}
.v-datefield.green [class*="textfield"] {
background-color: green;
}
Johannes, Joacim,
this is what I have done. But I don't like the solution, because I need to write all types of fields:
.v-textfield-changed-field {
background: $v-changed-field-background;
}
.v-textarea-changed-field {
background: $v-changed-field-background;
}
.v-checkbox-changed-field {
background: $v-changed-field-background;
}
.v-stepper-changed-field [class*="input"] {
background: $v-changed-field-background;
}
.v-datefield-changed-field [class*="textfield"] {
background: $v-changed-field-background;
}
.v-filterselect-changed-field [class*="input"] {
background: $v-changed-field-background;
}
You don't need to do that though.
.changed-field,
.changed-field [class*="input"],
.changed-field [class*="textfield"] {
background: $v-changed-field-background;
}
If that's not strong enough you can add .v-widget, i.e. .v-widget.changed-field etc.
Thanks Joacim, it works almost good ;-). It doesn't work for stepper and, the bigger problem, causes wrong behaviour for date field: not only the text field is colored, but also a calendar (see snapshot).
Not familiar with the Stepper component's DOM structure, so can't help you there.
If you don't want the popup themed you can use:
.changed-field:not(.v-datefield-popup),
.changed-field [class*="input"],
.changed-field [class*="textfield"] {
background: lightblue;
}