React-select: How to customize the style of a selected value? or get rid of this completely?

[ghost]

yeah I think the litle X and the blue box is very ugly. I wanna be free to catch the selected value and show it somewhere else, another component perhaps...

in order do get rid of the selected value box in the multi option I had to go to the file:

Value.js

in the folder react-select/lib

in line 93

to change the render function so it would return null;

I know this is wrong but what else can I do? thx.

[damonbauer]

@nelsontubaina -

You can change the style of the selected values by providing your own styles to .Select--multi .Select-value.

If you wanted to display selected items in a different component, you might:

• set .Select--multi .Select-value to display: none so that it doesn't show in the input area
• set a state entry that contains the selected item:

...
handleChange(item) {
  this.setState({
    selectedItems: this.state.selectedItems.push(item)
  });
}
...

There are some considerations to this, though:

• you have to maintain a separate list of selected items, with value and position in your options array (something react-select does for you)
• you have to wire up a "remove selected" method (react-select does this with the 'X')
• in your remove selected method, you would have to add the item back into the list (at its original index) that react-select uses to build its list.

I did something similar here (I'm using react-select-plus to get nested options, but otherwise, it's the same).

[beleidy]

To change the style you can use CSS - I used the following to remove the x and change the blue to a white box with dark text and a dark gray border:

.Select-value{
  border: 1px solid darkgray !important;
}

.Select-value-icon {
  display: none !important;
}

.Select-value-label {
  background-color: white;
  color: #111;
}

If you want to completely remove it, you can set .Select-value-label to display: none;

[danmo]

what worked for me was passing in a valueComponent:
<Select valueComponent={MyReactComponent} ....... />

and style the component as following:

{
 border: 1px solid red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

above should get you closer to having a custom selected value look.

[webmobiles]

please wich is the name style for disable case?

[webmobiles]

I've just discovered:

.Select.is-disabled > .Select-control {
   background-color: #e3e1e1;
}

[sachin32]

@danmo is your solution working

[sachin32]

I want to show value like 2 selected or 0 selected in multiple select option

[harsimarriar96]

const CustomStyle = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? {Color1} : {Color2},
    ':active': {
      backgroundColor: state.isSelected ? {Color3} : {Color4}
    }
  })
}
<Select styles={customStyle} >

This works just fine!

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!

[gtdeng]

Adding isFocused and isSelected

const CustomStyle = {
   option: (base, state) => {
      let backgroundColor = 'white;

      if (state.isSelected) {
        backgroundColor = "red";
      }

      if (state.isFocused) {
        backgroundColor = "blue";
      }

      return {
        ...base,
        backgroundColor
      };
    }
}
<Select styles={customStyle} >

[abdulbasit1248]

const customStyles = {
control: styles => ({
...styles,
backgroundColor: 'bg-dark-gray',
borderRadius: 0,
boxShadow: 'none',
border: 0,
fontSize: '12px',
fontFamily: 'SF-regular',
height: 45,
}),
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
return {
...styles,
backgroundColor: isDisabled ? 'black' : isSelected ? '#cccc' : isFocused ? 'gray' : null,
color: isDisabled ? '#ccc' : isSelected ? 'white' : data.color,
cursor: isDisabled ? 'not-allowed' : 'default',
};
},
placeholder: styles => ({
...styles,
...dot(),
fontSize: 19,
fontFamily: 'SF-regular',
color: 'white',
}),
};