Change the floating label color of the textbox in React Textbox component

30 Jan 20236 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-success label.e-float-text,
    .e-float-input.e-success input:focus ~ label.e-float-text,
    .e-float-input.e-success input:valid ~ label.e-float-text {
      color: #22b24b;
    }

    /* For Warning state */
    .e-float-input.e-warning label.e-float-text,
    .e-float-input.e-warning input:focus ~ label.e-float-text,
   .e-float-input.e-warning input:valid ~ label.e-float-text {
      color: #ffca1c;
    }
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {
    render() {
        return (<div>
        <div className="e-float-input e-input-group e-success">
            <input type='text' required={true} onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
            <span className="e-float-line"/>
            <label className="e-float-text">Success</label>
        </div>

        <div className="e-float-input e-input-group e-warning">
            <input type='text' required={true} onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
            <span className="e-float-line"/>
            <label className="e-float-text">Warning</label>
        </div>
    </div>);
    }
    onInputFocus(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.add('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.add('e-input-focus');
        }
    }
    onInputBlur(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.remove('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.remove('e-input-focus');
        }
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class Default extends React.Component {

public render() {
   return (
    <div>
        <div className="e-float-input e-input-group e-success">
            <input type='text' required = {true} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
            <span className="e-float-line"/>
            <label className="e-float-text">Success</label>
        </div>

        <div className="e-float-input e-input-group e-warning">
            <input type='text' required = {true} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
            <span className="e-float-line"/>
            <label className="e-float-text">Warning</label>
        </div>
    </div>
);
}

public onInputFocus(args: React.FocusEvent) {
    if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
    } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus')
    }
}

public onInputBlur(args: React.FocusEvent) {
    if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
    } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
    }
}
}

ReactDOM.render(<Default />, document.getElementById('input-container'));