Editing CSS Shadow DOM Textfield

General
1

Hi, i have a DateTimePicker and want to change the width of the Time-TextField (not of the date part)

Is there any way to get this done? Tried using following CSS , but it wont work

vaadin-time-picker::part(input) {
    width: 50px; 
}

DateTimePicker dateFrom = new DateTimePicker();
        dateFrom.setDatePlaceholder("Beginn");
        dateFrom.setDatePickerI18n(getDatePicketI18n());
2

The time picker has no part named input since the <input> element is in the light DOM rather than the shadow DOM. Depending on exactly which part you try to target, you might want to either use vaadin-time-picker::part(input-field) or vaadin-time-picker > input.

See Styling | Time Picker | Components | Vaadin Docs for an overview of all the supported selectors.

1 Like