How to change the style of the default components of vaadin with CSS?

Question

I am trying to replace the default appearance of components of vaadin flow like textfield, password field and combobox. Thought after using the bellow css for the textfield I see that they are not replaced entirely. Can you tell me how to modify it?

My css

input[type=text], select 
{
  width: 100%; 
  border: 1px solid #ccd;
  background-color: white;
  border-radius: 4px;
}

input[type=text]:hover {
  background-color: yellow;
}

Answer 1

I assume you are using the built-in Vaadin components, like TextField , PasswordField and ComboBox . Those are actually so called “web components”, that combine multiple elements together to add richer functionality over native HTML elements. The Vaadin components use shadow DOM internally, which requires a slightly more complex way of thinking about CSS, with global and scoped styles.

I suggest you read the following pieces of documentation:

• https://vaadin.com/docs/latest/ds/customization/style-scopes
• https://vaadin.com/docs/latest/ds/customization/css-custom-properties
• https://vaadin.com/docs/latest/ds/customization/custom-theme
• https://vaadin.com/docs/latest/ds/customization/styling-components