Having trouble getting help?
Contact Support
Contact Support
Customize the TextBox background color and text color in React TextBox component
21 Oct 20242 minutes to read
You can customize the React TextBox styles such as background-color, text-color and border-color by overriding its default styles.
To change the styles of the
floating label
, you must override the style to the input element.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (<div className="wrap">
<label> Normal Input </label>
<TextBoxComponent placeholder="First Name"/>
<label> Floating Input </label>
<TextBoxComponent placeholder="Last Name" floatLabelType="Auto"/>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('input-container'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
export default class App extends React.Component<{}, {}> {
constructor(props: any) {
super(props);
}
public render() {
return (
<div className="wrap">
<label> Normal Input </label>
<TextBoxComponent placeholder="First Name"/>
<label> Floating Input </label>
<TextBoxComponent placeholder="Last Name" floatLabelType="Auto"/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('input-container'));