Date Picker CSS Classes
Note: This feature is only available to Wix Studio users.
You can use the classes listed below
to style your DatePicker
elements with CSS.
For more information on styling your elements with CSS, see Styling Elements with CSS and the MDN CSS reference docs.
Important: Element structure and undocumented class names may change without advance warning. To avoid unintended style changes to your site, select elements with the documented class names only.
.date-picker
Targets date picker elements. For example:
css | Copy Code.date-picker {border: #ffff00;border-style: dotted;}
.date-picker__label
Targets date picker label text. For example:
css | Copy Code.date-picker__label {font-family: sans-serif;font-weight: 700;text-transform: lowercase;color: black;}
.date-picker__input
Targets date picker input boxes. For example:
css | Copy Code.date-picker__input {border: none;border-bottom: 2px solid #840292;background-color: #dfd2f4;font-family: monospace;}
.date-picker__icon
Targets date picker icons. For example:
css | Copy Code.date-picker__icon {fill: #5babef;}
.date-picker__header
Targets date picker header elements. For example:
css | Copy Code.date-picker__.header {margin-bottom: 25px;padding: 100px;border-bottom: 5px solid black;}
Was this helpful?