Change the floating label color of the TextBox in React
25 Oct 20242 minutes to read
You can change the floating label color of the TextBox for both success
and warning
validation states by applying the following CSS styles.
/* For Success state */
.e-float-input.e-input-group.e-success label.e-float-text,
.e-float-input.e-input-group.e-success input:focus ~ label.e-float-text,
.e-float-input.e-input-group.e-success input:valid ~ label.e-float-text {
color: #22b24b;
}
/* For Warning state */
.e-float-input.e-input-group.e-warning label.e-float-text,
.e-float-input.e-input-group.e-warning input:focus ~ label.e-float-text,
.e-float-input.e-input-group.e-warning input:valid ~ label.e-float-text {
color: #ffca1c;
}
import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {
render() {
return (
<div>
<TextBoxComponent placeholder="Success" floatLabelType="Auto" cssClass="e-success"/>
<TextBoxComponent placeholder="Warning" floatLabelType="Auto" cssClass="e-warning"/>
</div>
);
}
}
ReactDOM.render(<Default />, document.getElementById('input-container'));
import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {
public render() {
return (
<div>
<TextBoxComponent placeholder="Success" floatLabelType="Auto" cssClass="e-success"/>
<TextBoxComponent placeholder="Warning" floatLabelType="Auto" cssClass="e-warning"/>
</div>
);
}
}
ReactDOM.render(<Default />, document.getElementById('input-container'));