How to remove the default border colors in syncfusion datepicker when focused and after selecting a date.

[Amaya Gothamie]

Hi Syncfusion Team,

Currently I am working with Syncfusion DatePicker and I want to know,

How do I remove this shadow kinda border which appears when I click on this field?

and also, How to remove this border which appears after selecting a date and focused.

Also, How to remove this green border when not focused.

This is how I have used the Datepicker element.

 <SfDatePicker

     TValue="DateTime?"

     @bind-Value='@ExpiredDate'

     CssClass="custom-date-picker"

     Format="dd/MM/yyyy" Min="@(DateTime.Now)"

     OnInput="ValidateDate">     

 </SfDatePicker>

I have tried several approaches like supplying custome css, finding the component on Inspect and changing the attributes but couldn't come up with a proper solution.

   .custom-date-picker .e-input-group.e-control-wrapper.e-datepicker:focus {

       outline: none;

       box-shadow: none;

   }

   .e-input:focus:not(.e-success):not(.e-warning):not(.e-error) {

       border-color: none !important;

       box-shadow: none !important;

   }  

I also tried doing like this in Inspect. but no result.

I hope I will get your assistance for this task to fullfill my requirement.

Thank you.

[UdhayaKumar Duraisamy]

You can customize the border color of the DatePicker component using the CSS classes provided below. These classes allow you to change the border color for different states such as focus, success, and error. Please refer to the sample reference for implementation.

<style>

    /*Change the Border color of Focus class*/

    .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error){

        box-shadow: none;

    }

 

    .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error){

        box-shadow: none;

    }

 

    .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error){

        /*Change the Border color of the component*/

    }

 

    /*Change the Border color of Success class*/

    .e-input.e-success, .e-input.e-success:focus, .e-input-group.e-success input.e-input, .e-input-group.e-control-wrapper.e-success input.e-input, .e-input-group.e-success .e-input-group-icon, .e-input-group.e-control-wrapper.e-success .e-input-group-icon, .e-input-group.e-success textarea.e-input, .e-input-group.e-control-wrapper.e-success textarea.e-input{

        border-color: #ced4da;

    }

 

    .e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success, .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success, .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success, .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success{

        box-shadow: none;

    }

 

    .e-input-group.e-success, .e-input-group.e-control-wrapper.e-success, .e-input-group.e-success:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left)

    {

        border-color: #ced4da;

    }

 

    /*Change the Border color of Error class*/

    .e-input-group.e-error, .e-input-group.e-control-wrapper.e-error, .e-input-group.e-error:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){

        border-color: #ced4da;

    }

 

    .e-input.e-error, .e-input.e-error:focus, .e-input-group.e-error input.e-input, .e-input-group.e-control-wrapper.e-error input.e-input, .e-input-group.e-control-wrapper.e-error .e-input-group-icon, .e-input-group.e-error .e-input-group-icon, .e-input-group.e-error textarea.e-input, .e-input-group.e-control-wrapper.e-error textarea.e-input

    {

            border-color: #ced4da;

    }

    .e-input:focus:not(.e-success):not(.e-warning).e-error, .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus, .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus, .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus, .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus, .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input, .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input, .e-input-group.e-input-focus:not(.e-success):not(.e-warning).e-error, .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error, .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error, .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error{

        box-shadow: none;

    }

</style>

Sample: https://blazorplayground.syncfusion.com/embed/BZhTtPsuKnQMXBCm?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5 

[Amaya Gothamie]

Thank you so much for your reply!, Can I also know whether it is possible to remove the light blue border we get when focused?

Also can I add   #1f628e; this color when focused on the component, 

this is what it looks like now.

Thank you so much again!

[UdhayaKumar Duraisamy]

Yes, you can use the CSS class shared below to customize the border color when the component gains focus.

    .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error){

        border-color: #1f628e;

    }

 

    .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled){

        border-color: #1f628e;

    }

Sample: https://blazorplayground.syncfusion.com/embed/rZhfXFrjgaDOajZK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Additionally, you can try Syncfusion Theme Studio option. By using this, you can customize the components based on the application needs and download them to use in the application.

Theme Studio: Theme Studio | Blazor | Syncfusion

To learn how to use the theme studio, please follow the instructions provided in the documentation linked below.

UG Link: Theme Studio in Blazor | Custom Themes |Syncfusion

[Amaya Gothamie]

Dear Team,

Thank you so much! It works just like how I wanted.

Regards,

Amaya.