How to change the style of a Ant-Design 'Select' component?

Question

Suppose I want to change the standard white background color of the Select component to green.

My try...

<Select
 style={{ backgroundColor: 'green' }}>
   // Options...
</Select>

...didn't do it.

Can someone point me in the right direction?

[EDIT]

I ended up using the suggested approach from Jesper We.

Overwriting the color for all selections...

.ant-select-selection {
  background-color: transparent;
}

...then I could style the Select components individually.

Whitton

Can you give us a working example on Codesandbox – Myrmecophagous

Answer 1

<Select> renders a whole set of <div>s, you need to take a look at the resulting HTML element tree to understand what you are doing. You can't do it through the style attribute, you need to do it in CSS.

The proper place to attach a background color is

.ant-select-selection {
  background-color: green;
}

This will make all your selects green. Give them individual classNames if you want different colors for different selects.

Siamese

if you're using css modules, you can do this: .myClassName{ :global { .ant-select-selector { background-color: #f50c5b; } } } – Copperas

What if Im using a styled-component? – Timofei

Could be a problem if you are using Multiple number of select components. Doesn't work well in that case. – Odense

@Copperas this doesn't work for me. Is this feature no-longer existing? – Firooc

Answer 2

For my form with Select element a have some code in render:

const stateTasksOptions =
    this.tasksStore.filters.init.state.map(item =>
        <Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
            <span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
        </Select.Option>
    )

return (
    ....
    <Select
        mode="multiple"
        value={this.tasksStore.filters.selected.state.map(d => d)}
        onChange={this.handleTasksStatus}
        optionLabelProp="title"
    >
        {stateTasksOptions}
    </Select>
    ....
)

And some css for colorizing.

Result:

Mcmaster

Answer 3

Try dropdownStyle instead of style.

<Select
 dropdownStyle={{ backgroundColor: 'green' }}>
   // Options...
</Select>

dropdownStyle is one of select props.

reference: antd select

Overrule

This only styles the items in the dropdown menu and unfortunately doesn't effect the select input at all. – Whitton

What if you want to change the style on hover? it does not work if you put '&:hover' : {backgroundColor: 'red'} – Timofei

Answer 4

Somebody stated the selector to be

.ant-select-selection {...

However it should be selector as follows:

.ant-select-selector {
  background-color: green;
}

Hodgkin

This was the only answer that worked for me – Gainless

Answer 5

From their official docs https://pro.ant.design/docs/style

Override the component style Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.

Antd Select In multi-select state, the default will show all the select items, here we add a limit height for display scroll bar when the content beyond this height.

// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

ReactDOM.render(
  <Select
    mode="multiple"
    style={{ width: 300 }}
    placeholder="Please select"
    className={styles.customSelect}
  >
        {children}
      
  </Select>,
  mountNode,
);

/* TestPage.less */
.customSelect {
  :global {
    .ant-select-selection {
      max-height: 51px;
      overflow: auto;
    }
  }
}

Two points need to be noted:

The imported antd component class name is not translated by CSS Modules, so the overridden class name .ant-select-selection must be put in :global. Because of the previous note, the override is global. To avoid affecting other Select components, the setting needs to be wrapped by an extra classname to add range restriction

Calcify

What do you mean by "To avoid affecting other Select components, the setting needs to be wrapped by an extra classname to add range restriction"? – Odense

Their docs doesn't mention using :global and the link is actually empty. I'm not able to get this to work... how can I? – Firooc

Answer 6

with all the above answers you cant change the styles of tags conditionally but with below approach you can.

You can do a hack and change the styles as you like of tags of select dropdown. You can use dropdownRender of select which takes 2 arguments

• menuNode
• props

use props children property to reach to each tag and change the styles and you can conditionally change the styles as you like.

for reference below is the example link for code sandbox

Select Tags Styles Sanbox

May not be an efficient way to do it but you can use this for now to meet your business requirement.

Thanks

Stephan

Answer 7

They implemented this feature with v4 of ant design:
https://github.com/ant-design/ant-design/pull/21064

But beware before blindly upgrading from v3 -> v4 - a lot has changed:
https://github.com/ant-design/ant-design/issues/20661

Rueful

Answer 8

menuItemSelectedIcon={(props) => {
                return (mode == "multiple" ?
                  <Tooltip title="Check to confirm the apps alongwith the vendor">
                    <input type="checkbox" checked={props.isSelected}
                      style={{
                        margin: 5
                      }}
                    />
                  </Tooltip>
                  : null)
              }}

Allen

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Fries

Answer 9

Lastly I was working on ant dropdown and it did not get style as I wanted and I did not find a good solution for that.

Then I decided to share my css solution for those who are in my situation:

.license-plate-letters {
    overflow-y: hidden !important;
    min-width: 240px !important;

    .rc-virtual-list-holder>div {
        height: auto !important;
    }

    .rc-virtual-list-holder-inner {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;

        .ant-select-item-option {
            padding: 0.5rem 12px !important;

            &:hover {
                background-color: #452380d2 !important;
                color: white !important;
            }
        }
    }
}

 <Select
 virtual={false}
 popupClassName="license-plate-letters">
  <Select.Option key={sth} Title="title">title</Select.Option>
  </Select>

Latishalatitude

Answer 10

please add the bordered = {false} props to select and it will work sandbox

<Select
    showSearch
    placeholder="Select a option"
    style={{

        backgroundColor: 'green',
    }}
    bordered={false}
// Options...
/>

Indicative

Answer 11

For ant design 5.20.2 ant-select-selection-item and ant-select-selector classes could be overwritten. I added some example code.

.ant-select-selection-item {
    white-space: break-spaces;
    word-break: break-word;
    line-height: 16px !important;
    font-weight: 600;
}

.ant-select-selector {
    height: 40px !important;
}

Paschasia

Answer 12

In angular, you can override the style with ng-deep

::ng-deep .ant-select-selector {
  background-color: red;
}

Profit