> Markdown version of [Sharing Styles with Component Types](https://vaadin.com/docs/v24/styling/styling-components/sharing-styles). Section index: [llms.txt](https://vaadin.com/docs/v24/styling/llms.txt)

# Sharing Styles with Component Types

The same block of CSS can be applied in a number of ways to multiple component types. For instance, you might want the same CSS for all text input fields: Text Fields, Number Fields and Combo Boxes, etc.

Multiple selectors can be specified for the same CSS by separating them with commas, like so:

```css
vaadin-text-field::part(input-field), vaadin-number-field::part(input-field) {
  background: white;
  border: 1px solid gray;
}
```

To avoid repeating the same part or state selector for each root element, you can wrap the element types in a `:where()` and instead apply the part or state selectors to it:

```css
:where(vaadin-text-field, vaadin-number-field)::part(input-field) {
  background: white;
  border: 1px solid gray;
}
```

If you know that all components with a particular part or state should get the same CSS, you can even omit the root element entirely:

```css
::part(input-field) {
  background: white;
  border: 1px solid gray;
}
```

The above example applies the CSS to `input-field` parts in all components that have one.

## <a id="common-to-all-input-fields"></a>Common to All Input Fields

The CSS selectors described in this section can be used to target common features in all Vaadin input field components, simultaneously.

### <a id="states"></a>States

- Required

  `[required]`

- Focused

  `[focused]`

- Keyboard Focused

  `[focus-ring]`

- Read-Only

  `[readonly]`

- Disabled

  `[disabled]`

- Not Empty

  `[has-value]`

### <a id="field"></a>Field

- Field Surface (background, border)

  `*::part(input-field)`

- Clear Button

  `*::part(clear-button)`

- Clear Button Icon

  `*::part(clear-button)::before`

### <a id="label"></a>Label

- Field with Label

  `[has-label]`

- Label

  `*::part(label)`

- Required Indicator

  `*::part(required-indicator)`

### <a id="helper-validation-error"></a>Helper & Validation Error

- Field with Helper

  `[has-helper]`

- Helper

  `*::part(helper-text)`

- Invalid Field

  `[invalid]`

- Field with error message

  `[has-error-message]`

- Error Message

  `*::part(error-message)`

> **Note: Universal Selector is Optional**
>
> The universal selector `*` can be omitted in the above selectors. It’s used here only to make the shadow part selectors easier to understand.

### <a id="input-field-borders"></a>Input Field Borders (since V24.1)

Borders can be easily enabled on all input field components by providing a non-zero value to the `--vaadin-input-field-border-width` CSS property. Using the default Lumo colors, this provides [WCAG 2.1 level AA](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) conformant contrast between the background and the field surface.

You can override the default border color with the `--vaadin-input-field-border-color` property.

These properties can be set globally by applying them to the `html` selector, or scoped to any element using a more specific CSS selector.

```css
/* Applies borders to all fields,
   and overrides default color to blue: */
html {
  --vaadin-input-field-border-width: 1px;
  --vaadin-input-field-border-color: blue;
}

/* Applies border only to fields with 'bordered-field' classname: */
.bordered-field {
  --vaadin-input-field-border-width: 1px;
}
```

`5d170f51-2d45-475e-ba03-e8c04722074e`