Change input styling in vaadin-date-time-picker.

Hi guys,
I am not able to style the input fields within the date-time-picker.
I have tried several options including :
:host(#myField)[part~=‘input-field’] {
width: 100px;

The above approach works alright for vaadin-text-fields though.

I would appreciate any suggestions. Thank you…

What’s the name of the CSS file and where did you put it?

@adaptable-uakari , It is vaadin-date-time-picker.css and I have placed it inside my themes/myTheme/components

to style the input the filename must be. vaadin-date-time-picker-date-text-field.css

Thank you @adaptable-uakari, unfortunately it made no change.

I changed the name of the file accordingly and my simple css is :host(.date-time)[part=‘input-field’] {
width: 100px;

What exactly do you want to do? Only set the widht of the datepicker?

Then you can do that in Java by calling setWidth

I am working with TypeScript :). I have this 2 date-time-pickers. which are exceptionally big and take way 2 much space from a little widget. I want to make each input smaller and also adjust the font size, in order to fit things better.

ah you are using dateTimePicker!

I can style the container for the , however changing the width/height in that one breaks the design of the inputs within. What does not work for me, is accessing the [part=‘input-field’]





That are the component css

hmm, let’s see :slightly_smiling_face:

I assume the css selector should be just :host[part=‘input-field’]{…} in this case

:host [part=“input-field”]

yep, still no change. the default options are still unchanged