Css customization in Vue Timepicker component
28 Feb 20234 minutes to read
TimePicker allows you to customize the textbox and popup list appearance to suit your application by using cssClass
property.
The below sample demonstrates customization of text appearance in a textbox, popup button, and popup list along with hover and active
state by using e-custom-style
class. Following is the list of available classes used to customize the entire TimePicker component.
Class Name | Description |
---|---|
e-time-wrapper | Applied to TimePicker wrapper element. |
e-timepicker | Applied to input element and TimePicker popup element. |
e-time-wrapper.e-timepicker | Applied to input element only. |
e-input-group-icon.e-time-icon | Applied to popup button. |
e-float-text | Applied to floating label text element. |
e-popup | Applied to popup element. |
e-timepicker.e-popup | Applied to TimePicker popup element only. |
e-list-parent | Applied to popup UL element. |
e-timepicker.e-list-parent | Applied to TimePicker popup UL element only. |
e-list-item | Applied to LI elements. |
e-hover | Applied to LI element hovering time. |
e-active | Applied to active LI element. |
<template>
<div id="app">
<div class='wrap'>
<ejs-timepicker id='timepicker' placeholder='Select a time' cssClass='e-custom-style'></ejs-timepicker>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { TimePickerPlugin } from "@syncfusion/ej2-vue-calendars";
Vue.use(TimePickerPlugin);
export default {}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
.wrap {
margin: 35px auto;
width: 240px;
}
/*customize the input element text color*/
.e-time-wrapper.e-custom-style #element { /* csslint allow: adjoining-classes */
display: block;
color: blue;
}
/*customize the floating label and popup button text color*/
.e-time-wrapper.e-custom-style .e-float-text.e-label-bottom, /* csslint allow: adjoining-classes */
.e-time-wrapper.e-custom-style .e-input-group-icon.e-time-icon.e-icons { /* csslint allow: adjoining-classes */
color: blue;
}
/*customize the input element text selection*/
.e-time-wrapper.e-custom-style.e-input-group::before, /* csslint allow: adjoining-classes */
.e-time-wrapper.e-custom-style.e-input-group::after, /* csslint allow: adjoining-classes */
.e-time-wrapper.e-custom-style.e-input-group .e-timepicker::selection { /* csslint allow: adjoining-classes */
background: blue;
}
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul, /* csslint allow: adjoining-classes */
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item { /* csslint allow: adjoining-classes */
background-color: #c0ebff;
}
/*customize the list item hover color*/
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-hover, /* csslint allow: adjoining-classes */
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-active.e-hover { /* csslint allow: adjoining-classes */
background-color: blue;
color: #fff;
}
/*customize the active element text color*/
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-active { /* csslint allow: adjoining-classes */
color:#333;
background-color: #fff;
}
</style>