We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Custom Textbox, Numeric, Dropdown, ..etc (inputs)

Hello Team,

How can I customize the color of the border that is displayed when using the 'e-success e-outline' cssClass and its floatLabelType?

Regards.


7 Replies 1 reply marked as answer

SP Sureshkumar P Syncfusion Team December 12, 2022 12:16 PM UTC

Hi Jean,

You can use our Theme Studio option to change the component UI. By using this, you can customize the component based on the application needs and download and make use of in the application.

Theme Studio: https://ej2.syncfusion.com/themestudio/?theme=material     

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

UG Link: https://ej2.syncfusion.com/documentation/appearance/theme-studio/

Regards,

Sureshkumar P



JC Jean Caiza replied to Sureshkumar P December 12, 2022 02:24 PM UTC

Hello,


Thanks for answering, I have tried it directly from the theme studio, changing it globally works without problems, but what if I want to add a color apart from the success, error, warning ? how can i do it correctly?


Regards



SP Sureshkumar P Syncfusion Team December 13, 2022 11:16 AM UTC

Jean, you can achieve your requirement by using the below style changes.

Find the code example here:

 

/* warning color style changes */

 

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

    border-colorgreen;

}

 

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

    box-shadowinset 1px 0 greeninset -1px 0 greeninset 0 -1px green;

}

 

.e-outline.e-float-input.e-warning.e-input-focus input:focus~label.e-float-text.e-outline.e-float-input.e-input-group.e-warning.e-valid-input label.e-label-top.e-float-text.e-outline.e-float-input.e-bigger.e-warning.e-input-focus input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-warning.e-input-focus input:focus~label.e-float-text.e-outline.e-float-input.e-small.e-warning.e-input-focus input:focus~label.e-float-text.e-small .e-outline.e-float-input.e-warning input:focus~label.e-float-text.e-outline.e-float-input.e-small.e-bigger.e-warning input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-small:not(.e-warninginput:focus~label.e-float-text.e-outline.e-float-input.e-warning textarea:focus~label.e-float-text.e-outline.e-float-input.e-bigger.e-warning textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-warning textarea:focus~label.e-float-text.e-outline.e-float-input.e-small.e-warning textarea:focus~label.e-float-text.e-small .e-outline.e-float-input.e-warning textarea:focus~label.e-float-text.e-outline.e-float-input.e-small.e-bigger.e-warning textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-small.e-warning textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-warning input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-bigger.e-warning input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-warning input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-warning input:focus~label.e-float-text.e-small .e-outline.e-float-input.e-control-wrapper.e-warning input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-warning input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-warning textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-warning textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus~label.e-float-text.e-small .e-outline.e-float-input.e-control-wrapper.e-warning textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus~label.e-float-text.e-outline.e-float-input.e-warning label.e-float-text.e-label-top.e-outline.e-float-input.e-input-group.e-warning label.e-float-text.e-label-top.e-outline.e-float-input.e-control-wrapper.e-warning label.e-float-text.e-label-top.e-outline.e-float-input.e-valid-input.e-warning:not(.e-input-focusinput:valid~label.e-float-text.e-label-top.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-input-focusinput:focus~label.e-float-text.e-label-top.e-outline.e-float-input.e-valid-input.e-warning:not(.e-input-focustextarea:valid~label.e-float-text.e-label-top.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-input-focustextarea:focus~label.e-float-text.e-label-top.e-outline.e-float-input.e-warning.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-bigger.e-warning.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-warning.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-small.e-warning.e-input-focus input~label.e-float-text.e-small .e-outline.e-float-input.e-warning.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-small.e-bigger.e-warning.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-small:not(.e-warning).e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-bigger.e-warning.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input~label.e-float-text.e-small .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input~label.e-float-text {

    color:green

}

.e-outline.e-warning.e-input-focus:not(.e-success):not(.e-errorlabel.e-float-text::before.e-outline.e-warning.e-input-focus:not(.e-success):not(.e-errorlabel.e-float-text::after.e-outline.e-float-input.e-warning.e-input-focus:not(.e-success):not(.e-errorlabel.e-float-text::before.e-outline.e-float-input.e-warning.e-input-focus:not(.e-success):not(.e-errorlabel.e-float-text::after.e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-errorlabel.e-float-text::before.e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-errorlabel.e-float-text::after {

    border-colorgreen;

}

 

.e-outline.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focuslabel.e-float-text::before.e-outline.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focuslabel.e-float-text::after.e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focuslabel.e-float-text::before.e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focuslabel.e-float-text::after.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focuslabel.e-float-text::before.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focuslabel.e-float-text::after {

    border-top-colorgreen;

}

/* error class style override */

 

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

    border-coloryellow;

}

 

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

    box-shadowinset 1px 0 yellowinset -1px 0 yellowinset 0 -1px yellow;

}

 

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

    box-shadowinset 1px 0 yellowinset -1px 0 yellowinset 0 -1px yellow;

}

 

.e-outline.e-input-focus label.e-float-text::before.e-outline.e-input-focus label.e-float-text::after.e-outline.e-float-input.e-input-focus label.e-float-text::before.e-outline.e-float-input.e-input-focus label.e-float-text::after.e-outline.e-float-input.e-control-wrapper.e-input-focus label.e-float-text::before.e-outline.e-float-input.e-control-wrapper.e-input-focus label.e-float-text::after {

    border-top-coloryellow;

}

 

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

    border-coloryellow;

}

 

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

    border-top-color:rgba(0,0,0,0);

}

 

.e-outline.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focuslabel.e-float-text::before.e-outline.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focuslabel.e-float-text::after.e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focuslabel.e-float-text::before.e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focuslabel.e-float-text::after.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focuslabel.e-float-text::before.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focuslabel.e-float-text::after {

    border-top-coloryellow;

}

 

.e-outline.e-error.e-input-focus:not(.e-success):not(.e-warninglabel.e-float-text::before.e-outline.e-error.e-input-focus:not(.e-success):not(.e-warninglabel.e-float-text::after.e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warninglabel.e-float-text::before.e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warninglabel.e-float-text::after.e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warninglabel.e-float-text::before.e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warninglabel.e-float-text::after {

    border-coloryellow;

}

 

.e-outline.e-float-input.e-error.e-input-focus input:focus~label.e-float-text.e-outline.e-float-input.e-input-group.e-error.e-valid-input label.e-label-top.e-float-text.e-outline.e-float-input.e-bigger.e-error.e-input-focus input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-error.e-input-focus input:focus~label.e-float-text.e-outline.e-float-input.e-small.e-error.e-input-focus input:focus~label.e-float-text.e-small .e-outline.e-float-input.e-error input:focus~label.e-float-text.e-outline.e-float-input.e-small.e-bigger.e-error input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-small:not(.e-errorinput:focus~label.e-float-text.e-outline.e-float-input.e-error textarea:focus~label.e-float-text.e-outline.e-float-input.e-bigger.e-error textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-error textarea:focus~label.e-float-text.e-outline.e-float-input.e-small.e-error textarea:focus~label.e-float-text.e-small .e-outline.e-float-input.e-error textarea:focus~label.e-float-text.e-outline.e-float-input.e-small.e-bigger.e-error textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-small.e-error textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-error input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-bigger.e-error input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-error input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus~label.e-float-text.e-small .e-outline.e-float-input.e-control-wrapper.e-error input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-error textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-bigger.e-error textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus~label.e-float-text.e-small .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus~label.e-float-text.e-outline.e-float-input.e-error label.e-float-text.e-label-top.e-outline.e-float-input.e-input-group.e-error label.e-float-text.e-label-top.e-outline.e-float-input.e-control-wrapper.e-error label.e-float-text.e-label-top.e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focusinput:valid~label.e-float-text.e-label-top.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focusinput:focus~label.e-float-text.e-label-top.e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focustextarea:valid~label.e-float-text.e-label-top.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focustextarea:focus~label.e-float-text.e-label-top.e-outline.e-float-input.e-error.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-bigger.e-error.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-error.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-small.e-error.e-input-focus input~label.e-float-text.e-small .e-outline.e-float-input.e-error.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-small.e-bigger.e-error.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-small:not(.e-error).e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-bigger.e-error.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input~label.e-float-text.e-small .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input~label.e-float-text {

    coloryellow;

}

 

.e-float-input.e-error label.e-float-text.e-float-input.e-control-wrapper.e-error label.e-float-text.e-float-input.e-error input:focus~label.e-float-text.e-float-input.e-control-wrapper.e-error input:focus~label.e-float-text.e-float-input.e-error.e-input-focus input~label.e-float-text.e-float-input.e-control-wrapper.e-error.e-input-focus input~label.e-float-text.e-float-input.e-error textarea:focus~label.e-float-text.e-float-input.e-control-wrapper.e-error textarea:focus~label.e-float-text {

    coloryellow;

}

/* success class style override */

 

.e-outline.e-input-group.e-success,

.e-outline.e-input-group.e-control-wrapper.e-success,

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

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

.e-outline.e-float-input.e-success,

.e-outline.e-float-input.e-input-group.e-success,

.e-outline.e-float-input.e-control-wrapper.e-success,

.e-outline.e-float-input.e-input-group.e-control-wrapper.e-success {

  border-colorblueviolet;

}

 

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

  label.e-float-text::before,

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

  label.e-float-text::after,

.e-outline.e-float-input.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus)

  label.e-float-text::before,

.e-outline.e-float-input.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus)

  label.e-float-text::after,

.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus)

  label.e-float-text::before,

.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus)

  label.e-float-text::after {

  border-top-colorblueviolet;

}

 

.e-outline.e-success.e-input-focus:not(.e-error):not(.e-warninglabel.e-float-text::before.e-outline.e-success.e-input-focus:not(.e-error):not(.e-warninglabel.e-float-text::after.e-outline.e-float-input.e-success.e-input-focus:not(.e-error):not(.e-warninglabel.e-float-text::before.e-outline.e-float-input.e-success.e-input-focus:not(.e-error):not(.e-warninglabel.e-float-text::after.e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warninglabel.e-float-text::before.e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warninglabel.e-float-text::after {

    border-colorblueviolet;

}

 

.e-outline.e-float-input.e-success.e-input-focus input:focus~label.e-float-text.e-outline.e-float-input.e-input-group.e-success.e-valid-input label.e-float-text.e-label-top.e-outline.e-float-input.e-bigger.e-success.e-input-focus input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-success.e-input-focus input:focus~label.e-float-text.e-outline.e-float-input.e-small.e-success.e-input-focus input:focus~label.e-float-text.e-small .e-outline.e-float-input.e-success input:focus~label.e-float-text.e-outline.e-float-input.e-small.e-bigger.e-success input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-small:not(.e-successinput:focus~label.e-float-text.e-outline.e-float-input.e-success textarea:focus~label.e-float-text.e-outline.e-float-input.e-bigger.e-success textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-success textarea:focus~label.e-float-text.e-outline.e-float-input.e-small.e-success textarea:focus~label.e-float-text.e-small .e-outline.e-float-input.e-success textarea:focus~label.e-float-text.e-outline.e-float-input.e-small.e-bigger.e-success textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-small.e-success textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-success input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-bigger.e-success input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-success input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-success input:focus~label.e-float-text.e-small .e-outline.e-float-input.e-control-wrapper.e-success input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-success input:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-success textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-bigger.e-success textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-success textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-success textarea:focus~label.e-float-text.e-small .e-outline.e-float-input.e-control-wrapper.e-success textarea:focus~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:focus~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-success textarea:focus~label.e-float-text.e-outline.e-float-input.e-success label.e-float-text.e-label-top.e-outline.e-float-input.e-input-group.e-success label.e-float-text.e-label-top.e-outline.e-float-input.e-control-wrapper.e-success label.e-float-text.e-label-top.e-outline.e-float-input.e-valid-input.e-success:not(.e-input-focusinput:valid~label.e-float-text.e-label-top.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-input-focusinput:focus~label.e-float-text.e-label-top.e-outline.e-float-input.e-valid-input.e-success:not(.e-input-focustextarea:valid~label.e-float-text.e-label-top.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-input-focustextarea:focus~label.e-float-text.e-label-top.e-outline.e-float-input.e-success.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-bigger.e-success.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-success.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-small.e-success.e-input-focus input~label.e-float-text.e-small .e-outline.e-float-input.e-success.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-small.e-bigger.e-success.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-small:not(.e-success).e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-bigger.e-success.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input~label.e-float-text.e-small .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus input~label.e-float-text.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input~label.e-float-text.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input~label.e-float-text {

    colorblueviolet;

}

 

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

    box-shadowinset 1px 0 bluevioletinset -1px 0 bluevioletinset 0 -1px blueviolet;

}

 


Find the sample here: https://stackblitz.com/edit/react-1j7zqv?file=index.js,index.css



JC Jean Caiza replied to Sureshkumar P December 13, 2022 02:59 PM UTC

Thank you very much for your solution.


I have seen some strange behavior with the DropdownList when you open the popup. (placeholder color)




SP Sureshkumar P Syncfusion Team December 14, 2022 11:25 AM UTC

Jean, use the below style changed to override the mentioned behavior.

Find the code example here:

/* warning class dropdownlist placeholder style change*/

.e-float-input.e-control-wrapper:not(.e-error).e-input-focus.e-warning input[readonly]~label.e-label-top.e-float-text,

.e-float-input:not(.e-error).e-input-focus.e-warning input[readonly]~label.e-label-top.e-float-text {

    colorgreen;

}

 

/* success class dropdownlist placeholder style change*/

.e-float-input.e-control-wrapper:not(.e-error).e-input-focus.e-success input[readonly]~label.e-label-top.e-float-text,

.e-float-input:not(.e-error).e-input-focus.e-success input[readonly]~label.e-label-top.e-float-text {

    colorblueviolet;

}

 


Find the modified sample here: https://stackblitz.com/edit/react-1j7zqv-zwv6sk?file=index.js,index.css



Marked as answer

AT Alberto Torres May 2, 2023 03:55 PM UTC

Hi Synfusion team, I've a question...

Reading the answers of this thread, I would like to know how I could implement a different color for the focus of the texbox, numeric, dropdown inputs. For example: the default color for the 'e-succes e-outline' class would be #d6d6d6 while when a focus is made the color should be: #f48c0587


Without focus



With focus


With focus and error





MR Mallesh Ravi Chandran Syncfusion Team July 20, 2023 05:31 PM UTC

Hi Jean,

Regarding your requirement, we have prepared a sample for your reference. This sample demonstrates how to implement a different color for the focus of textbox, numeric, and dropdown inputs. For example, in this sample, when a focus is made, the color should be orange. When a focus with an error ("e-outline e-error") is made, the color should be orangered. Please see the attached sample.


/* Textbox, NumerictextBox, Dropdown inputs With focus */

 

.e-outline.e-float-input.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),

.e-outline.e-float-input.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),

.e-outline.e-float-input.e-input-group.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),

.e-outline.e-float-input.e-input-group.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),

.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),

.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),

.e-outline.e-float-input.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),

.e-outline.e-float-input.e-input-group.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),

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

.e-outline.e-float-input.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),

.e-outline.e-float-input.e-input-group.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),

.e-outline.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left) {

  border-top-colorrgba(0000);

  box-shadowinset 1px 0 orangeinset -1px 0 orangeinset 0 -1px orange;

}

.e-outline.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),

.e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),

.e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),

.e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),

.e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),

.e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),

.e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),

.e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),

.e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),

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

.e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),

.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),

.e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),

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

.e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),

.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),

.e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),

.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {

  border-left-colororange;

  border-right-colororange;

  border-bottom-colororange;

}

 

.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,

.e-float-input.e-control-wrapper:not(.e-error).e-input-focus

  input

  ~ label.e-float-text,

.e-outline.e-float-input.e-input-group.e-valid-input.e-input-focus

  label.e-label-top,

.e-outline.e-float-input.e-input-group.e-input-focus label.e-label-top,

.e-outline.e-float-input.e-control-wrapper.e-input-group.e-valid-input.e-input-focus

  label.e-label-top,

.e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus

  label.e-label-top {

  colororange;

}

 

.e-outline.e-input-focus label.e-float-text::before,

.e-outline.e-input-focus label.e-float-text::after,

.e-outline.e-float-input.e-input-focus label.e-float-text::before,

.e-outline.e-float-input.e-input-focus label.e-float-text::after,

.e-outline.e-float-input.e-control-wrapper.e-input-focus

  label.e-float-text::before,

.e-outline.e-float-input.e-control-wrapper.e-input-focus

  label.e-float-text::after {

  border-top-colororange;

}

 

.e-float-input:not(.e-error