CODEWITHSUNDEEP
cssvaadinvaadin-flow
nick
nick

Reputation: 249

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

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;
}

Upvotes: 0

Views: 438

Answers (1)

Jouni
Jouni

Reputation: 2918

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:

Upvotes: 1

Related Questions