Hey everyone.
I am new to Vaadin Flow and I was trying to create a simple form and I have this issue where every parameter of text-field and text-area are changed just fine, but the text-area’s hover color is not, even though works just fine for text-field.
Please see the video below to get to know the issue + the code, thank you!
Java Flow
@Route("suggest")
@PageTitle("Ode - Suggest a Poem")
@RolesAllowed({"USER", "ADMIN"})
public class SuggestPoemView extends VerticalLayout {
private final UserService userService;
public SuggestPoemView(UserService userService) {
this.userService = userService;
addClassName("suggest-view");
// Form container
Div formContainer = new Div();
formContainer.addClassName("form-container");
// Title
H1 title = new H1("Suggest a Poem");
title.addClassName("form-title");
// Create input fields
TextField nameField = createTextField("Poem Name", "Enter the poem's name");
TextArea descriptionField = createTextArea("Description", "Enter a short description of the poem");
DatePicker datePicker = new DatePicker("Date of Issue");
datePicker.addClassName("input-field");
// Submit button
Button submitButton = new Button("Submit");
submitButton.addClassName("submit-button");
// Footer text
Span footerText = new Span();
footerText.getElement().setProperty("innerHTML",
"<a href='/' class='auth-link'>Back to Home</a>");
footerText.addClassName("footer-text");
// Form layout
VerticalLayout formLayout = new VerticalLayout(
title,
nameField,
descriptionField,
datePicker,
submitButton,
footerText
);
formLayout.setSpacing(true);
formLayout.setWidthFull();
formLayout.setAlignItems(FlexComponent.Alignment.CENTER);
formContainer.add(formLayout);
add(formContainer);
}
private TextField createTextField(String label, String placeholder) {
TextField textField = new TextField(label);
textField.addClassName("input-field");
textField.setPlaceholder(placeholder);
textField.setClearButtonVisible(true);
return textField;
}
private TextArea createTextArea(String label, String placeholder) {
TextArea textArea = new TextArea(label);
textArea.addClassName("input-area");
textArea.setPlaceholder(placeholder);
textArea.setClearButtonVisible(true);
return textArea;
}
}
CSS
/* ================================
General styling theme & Views
==================================== */
.signup-view,
.login-view,
.suggest-view {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #121212;
color: white;
}
/* Form container styling */
.form-container {
background-color: #1e1e1e;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
width: 100%;
max-width: 400px;
}
/* Form title styling */
.form-title {
color: #1DB954;
font-size: 2.5rem;
text-align: center;
margin-bottom: 20px;
}
/* =======================================
Input fields styling for TextField & TextArea
=========================================== */
.input-field,
.input-area {
width: 300px;
/* Custom properties for label, background, hover, and text */
--vaadin-input-field-label-color: rgba(197, 199, 197, 0.7);
--vaadin-input-field-focused-label-color: rgb(246, 245, 245);
--vaadin-input-field-hovered-label-color: rgb(246, 245, 245);
--vaadin-input-field-placeholder-color: rgb(97, 97, 97);
--vaadin-input-field-background: rgb(42, 42, 43);
--vaadin-input-field-hover-highlight: rgb(81, 81, 81);
--vaadin-input-field-value-color: rgb(246, 245, 245);
}
/* -------------------------------
Reveal (eye) button styling
-------------------------------- */
.input-field::part(reveal-button) {
color: rgba(78, 172, 107, 0.94);
background-color: rgb(42, 42, 43);
border-radius: 50%;
padding: 5px;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
transform 0.2s ease-in-out;
}
.input-field::part(reveal-button):hover {
color: rgba(97, 245, 140, 0.94);
background-color: rgb(81, 81, 81);
transform: scale(1.1);
}
/* -------------------------------
Clear button styling in inputs
-------------------------------- */
.input-field::part(clear-button),
.input-area::part(clear-button) {
color: rgba(237, 119, 119, 0.94);
background-color: rgb(42, 42, 43);
border-radius: 50%;
padding: 5px;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
transform 0.2s ease-in-out;
}
.input-field::part(clear-button):hover,
.input-area::part(clear-button):hover {
color: rgba(234, 74, 74, 0.94);
background-color: rgb(81, 81, 81);
transform: scale(1.1);
}
/* ==============================================
Button styling
============================================== */
.register-button,
.login-button,
.submit-button {
background-color: #1DB954;
color: white;
padding: 12px 20px;
font-size: 16px;
border-radius: 5px;
width: 100%;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s ease;
}
.register-button:hover,
.login-button:hover,
.submit-button:hover {
background-color: #1AAE44;
}
/* ==============================================
Footer text link styling for Register and Login pages
============================================== */
.footer-text .auth-link {
text-decoration: none;
color: rgba(78, 172, 107, 0.94);
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
}
.footer-text .auth-link:hover {
text-decoration: underline;
color: rgba(237, 237, 237, 0.9);
}