Style in React ComboBox component

21 Feb 20268 minutes to read

The following CSS classes and structures enable customization of the ComboBox appearance to match your design requirements.

Customizing the appearance of wrapper element

Apply custom styling to the wrapper element using the following CSS.

.e-ddl.e-input-group.e-control-wrapper .e-input {
    font-size: 20px;
    font-family: emoji;
    color: #ab3243;
    background: #32a5ab;
}

Customizing the dropdown icon’s color

Change the dropdown icon color using the following CSS.

.e-ddl.e-input-group .e-input-group-icon,.e-ddl.e-input-group.e-control-wrapper .e-input-group-icon:hover {
    color: #bb233d;
    font-size: 13px;
}

Customizing the focus color

Customize the input element focus color using the following CSS.

.e-ddl.e-input-group.e-control-wrapper.e-input-focus::before, .e-ddl.e-input-group.e-control-wrapper.e-input-focus::after {
    background: #c000ff;
}

Customizing the outline theme’s focus color

Customize the outline theme focus color using the following CSS.

.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-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) {
    border-color: #b1bd15;
    box-shadow: inset 1px 1px #b1bd15, inset -1px 0 #b1bd15, inset 0 -1px #b1bd15;
}

Customizing the disabled component’s text color

Style the text color of disabled components using the following CSS.

.e-input-group.e-control-wrapper .e-input[disabled] {
    -webkit-text-fill-color: #0d9133;
}

Customizing the float label element’s focusing color

Style the float label focus color using the following CSS.

.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after {
    background-color: #2319b8;
}

.e-ddl.e-input-group.e-control-wrapper.e-float-input.e-input-focus .e-float-text.e-label-top, .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {
    color: #2319b8;
}

Customizing the color of the placeholder text

Modify the placeholder text color using the following CSS.

.e-ddl.e-input-group input.e-input::placeholder {
    color: red;
}

Customizing the text selection color

Modify the text selection color and background using the following CSS.

.e-ddl.e-input-group input.e-input::selection {
    color: red;
    background: yellow;
}

Customizing the background color of focus, hover, and active items

Modify the background color for focused, hovered, and active items using the following CSS.

.e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover, .e-dropdownbase .e-list-item.e-hover {
    background-color: #1f9c99;
    color: #2319b8;
}

Customizing the appearance of pop-up element

Style the popup list appearance using the following CSS.

.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
    background-color: #29c2b8;
    color: #207cd9;
    font-family: emoji;
    min-height: 29px;
}

Adding mandatory asterisk to placeholder and float label

Add a mandatory asterisk (*) to placeholder and float label elements using the .e-input-group.e-control-wrapper.e-float-input .e-float-text::after class.

[Class-component]

index.jsx

import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // define the array of data
    sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
    render() {
        return (
        // specifies the tag for render the ComboBox component
        <ComboBoxComponent id="comboelement" dataSource={this.sportsData} placeholder="Select a game" floatLabelType="auto"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
  // define the array of data
  private sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
  public render() {
    return (
        // specifies the tag for render the ComboBox component
      <ComboBoxComponent id="comboelement" dataSource={this.sportsData}  placeholder="Select a game" floatLabelType= "auto"/>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

index.jsx

import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // define the array of data
    const sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
    return (
    // specifies the tag for render the ComboBox component
    <ComboBoxComponent id="comboelement" dataSource={sportsData} placeholder="Select a game" floatLabelType="auto"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  // define the array of data
   const sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];

    return (
        // specifies the tag for render the ComboBox component
      <ComboBoxComponent id="comboelement" dataSource={sportsData}  placeholder="Select a game" floatLabelType= "auto"/>
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));