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.
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.
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
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
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-color: green; }
.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-shadow: inset 1px 0 green, inset -1px 0 green, inset 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-warning) input: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-focus) input:valid~label.e-float-text.e-label-top, .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-input-focus) input:focus~label.e-float-text.e-label-top, .e-outline.e-float-input.e-valid-input.e-warning:not(.e-input-focus) textarea:valid~label.e-float-text.e-label-top, .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-input-focus) textarea: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-error) label.e-float-text::before, .e-outline.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after, .e-outline.e-float-input.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::before, .e-outline.e-float-input.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after, .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::before, .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after { border-color: green; }
.e-outline.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::before, .e-outline.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after, .e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::before, .e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.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-focus) label.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-focus) label.e-float-text::after { border-top-color: green; } /* 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-color: yellow; }
.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-shadow: inset 1px 0 yellow, inset -1px 0 yellow, inset 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-shadow: inset 1px 0 yellow, inset -1px 0 yellow, inset 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-color: yellow; }
.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-color: yellow; }
.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-focus) label.e-float-text::before, .e-outline.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after, .e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::before, .e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.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-focus) label.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-focus) label.e-float-text::after { border-top-color: yellow; }
.e-outline.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before, .e-outline.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after, .e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before, .e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after, .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before, .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after { border-color: yellow; }
.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-error) input: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-focus) input:valid~label.e-float-text.e-label-top, .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) input:focus~label.e-float-text.e-label-top, .e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) textarea:valid~label.e-float-text.e-label-top, .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) textarea: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 { color: yellow; }
.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 { color: yellow; } /* 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-color: blueviolet; }
.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-color: blueviolet; }
.e-outline.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before, .e-outline.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after, .e-outline.e-float-input.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before, .e-outline.e-float-input.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after, .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before, .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after { border-color: blueviolet; }
.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-success) input: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-focus) input:valid~label.e-float-text.e-label-top, .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-input-focus) input:focus~label.e-float-text.e-label-top, .e-outline.e-float-input.e-valid-input.e-success:not(.e-input-focus) textarea:valid~label.e-float-text.e-label-top, .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-input-focus) textarea: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 { color: blueviolet; }
.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-shadow: inset 1px 0 blueviolet, inset -1px 0 blueviolet, inset 0 -1px blueviolet; }
|
Find
the sample here: https://stackblitz.com/edit/react-1j7zqv?file=index.js,index.css
Thank you very much for your solution.
I have seen some strange behavior with the DropdownList when you open the popup. (placeholder color)
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 { color: green; }
/* 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 { color: blueviolet; }
|
Find the modified sample here: https://stackblitz.com/edit/react-1j7zqv-zwv6sk?file=index.js,index.css
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
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-color: rgba(0, 0, 0, 0); box-shadow: inset 1px 0 orange, inset -1px 0 orange, inset 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-color: orange; border-right-color: orange; border-bottom-color: orange; }
.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 { color: orange; }
.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-color: orange; }
.e-float-input:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text, .e-bigger .e-float-input:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text, .e-small .e-float-input:not(.e-error) input:focus ~ label.e-float-text, .e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-bigger .e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-small:not(.e-error) input[readonly]:focus ~ label.e-float-text, .e-small .e-float-input:not(.e-error) input[readonly]:focus ~ label.e-float-text.e-label-top, .e-float-input.e-small.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-small:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly]:focus ~ label.e-float-text, .e-small .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-float-text.e-label-top, .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text, .e-small .e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text.e-label-top, .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text, .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text.e-label-top, .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-bigger .e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-float-text, .e-small .e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top, .e-float-input.e-small.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-float-text, .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top, .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text, .e-small .e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text.e-label-top, .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text, .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text.e-label-top, .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text, .e-bigger .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text, .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text, .e-float-input.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text, .e-bigger .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text, .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text, .e-small .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text, .e-float-input.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text, .e-bigger .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text, .e-small .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text, .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text, .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text, .e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text, .e-bigger .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text, .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text, .e-small .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text, .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text, .e-bigger .e-float-input.e-small: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-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text, .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text { color: orange; }
/* Textbox, NumerictextBox, Dropdown Inputs With focus with error */
.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-shadow: inset 1px 0 orangered, inset -1px 0 orangered, inset 0 -1px orangered; } .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-color: orangered; } .e-outline.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before, .e-outline.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after, .e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before, .e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after, .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before, .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after { border-color: orangered; }
.e-float-input.e-error label.e-float-text, .e-float-input.e-control-wrapper.e-error label.e-float-text, .e-outline.e-float-input.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 { color: orangered; }
|
Sample : https://stackblitz.com/edit/react-vkfzuz-p5fyaq?file=index.css,index.js,package.json
Regards,
Mallesh
