Hi Daniel
Styling the textfield is probably going to be a little more complicated than you may have anticipated, because the textfields are made in html using shadow DOM. [Here]
(https://github.com/vaadin/vaadin-themable-mixin/wiki) is a good documentation on styling shadow parts, if you are not yet familiar with it.
From the CSS perspective, this CSS will make a vaadin readonly textfield look like a normal vaadin textfield:
:host([readonly]
) [part="input-field"]
{
background-color: var(--lumo-contrast-10pct) !important;
color: var(--lumo-body-text-color) !important;
cursor: text !important;
}
:host([readonly]
) [part="input-field"]
::after {
border: none !important;
}
In order to apply this css to your text fields you will have to create your own TextField class by extending the existing TextField. There you can use @HtmlImport("path/to/myTextField.html)
to supply your own styling for the shadow DOM that is generated for the textField.
I think the [documentation]
(https://vaadin.com/docs/v12/flow/creating-components/tutorial-extending-component.html) about all this is a bit confusing, which is why I will provide you with as much information about it as I can.
customTextField.html
:
<dom-module id="custom-text-field" theme-for="vaadin-text-field">
<template>
<style>
:host([readonly]
) [part="input-field"]
{
background-color: var(--lumo-contrast-10pct) !important;
color: var(--lumo-body-text-color) !important;
cursor: text !important;
}
:host([readonly]
) [part="input-field"]
::after {
border: none !important;
}
</style>
</template>
</dom-module>
CustomTextField class
:
@HtmlImport("styles/components/customTextField.html") // styles is located in frontend folder
public class CustomTextField extends TextField {
// All Constructor Overloads.
// If you never use some of them, you can remove them if you want
public CustomTextField(){
super();
}
public CustomTextField(String label){
super(label);
}
public CustomTextField(String label, String placeholder){
super(label, placeholder);
}
public CustomTextField(String label, String initialValue, String placeholder) {
super(label, initialValue, placeholder);
}
public CustomTextField(ValueChangeListener<? super ComponentValueChangeEvent<TextField, String>> listener){
super(listener);
}
public CustomTextField(String label,
ValueChangeListener<? super ComponentValueChangeEvent<TextField, String>> listener){
super(label, listener);
}
public CustomTextField(String label, String initialValue,
ValueChangeListener<? super ComponentValueChangeEvent<TextField, String>> listener) {
super(label, initialValue, listener);
}
}