Hide the options dropdown from ANT Select component

S

ometimes we don't need the dropdown in the ANT Select component, then need to do some CSS change. In this, article, we'll do the same. We will hide the options dropdown from the ANT Select component.
Let's write the CSS.

Hide the options dropdown:

So, if you are using the ANT Select component, then it will look like this:

Hide the options dropdown from ANT Select component

And your ANT Select code would be ( with options dropdown) this:

                        <Select
                        mode="tags"
                        size='default'
                        placeholder="Place holder"
                        onChange={this.onChange}
                        style={{ width: '100%' }}
                      >
                        {/* {this.children} */}
                      </Select>
                    

But we need to hide the dropdown, and our ANT Select component will look like this:

Hide the options dropdown from ANT Select component

To achieve the above drodown we need to add "dropdownClassName" property and add the below styles as:

                        .select_dropdown{
                            display: none !important;
                          }
                    

So, our code would be :

                        <Select
                        mode="tags"
                        size='default'
                        placeholder="Place holder"
                        onChange={this.onChange}
                        style={{ width: '100%' }}
                        dropdownClassName={styles.select_dropdown}
                      >
                        {/* {this.children} */}
                      </Select>
                    

After:

Hide the options dropdown from ANT Select component