CODEWITHSUNDEEP
reactjsreact-select
recile
recile

Reputation: 431

how to change the arrow and put a triangle instead of it in react-select and when hover change color?

how to change the arrow and put a triangle instead of it in react-select and when hover change color?

<Select
    styles={customStyles}
    defaultValue={[colourOptions[2], colourOptions[3]]}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
  />

https://codesandbox.io/s/react-codesandboxer-example-90zz6

Upvotes: 0

Views: 2300

Answers (1)

Ali Ilman
Ali Ilman

Reputation: 180

To change the dropdown indicator, you can do something like this.

import React from 'react';
import Select, { components } from 'react-select';

const DropdownIndicator = props => {
  return (
    <components.DropdownIndicator {...props}>
      <span>&#9660;</span>
      // or triangle icons from FontAwesome etc
    </components.DropdownIndicator>
  );
};


<Select
  // other props
  components={{ DropdownIndicator }}
  // other props
/>

Reference: https://react-select.com/components
Scroll to the section for Dropdown Indicator.

EDIT: I just realised I hadn't answered your second question. To change colour of what, exactly? 🤓 If change the colour of the dropdown indicator on hover, then you can do something like this.

.dropdown-indicator-triangle:hover {
  color: red;
}

const DropdownIndicator = props => {
  return (
    <components.DropdownIndicator {...props}>
      <span className="dropdown-indicator-triangle">&#9660;</span>
      // or triangle icons from FontAwesome etc
    </components.DropdownIndicator>
  );
};

Upvotes: 3

Related Questions