How to remove text cursor on Select in React Select library?

Issue

I couldn't find a way to remove the blinking text cursor shown in the image. It shows up when Select is focused.

Here is my select code:

  <Select 
    options={sizeOptions}
    onChange={handleSelect}
    placeholder='Size'
    className='Select-container'
    classNamePrefix='Select'
    value={null}
  />  

Solution

The cursor shows up because the Select component uses an input.

If you add a classNamePrefix prop to the Select component you are able to target the input div using css and change the color to transparent, which the input inside the div inherits as its color:

<Select
  placeholder="Size"
  options={sizeOptions}
  className="Select-container"
  classNamePrefix="select"
/>

Changing the input color to transparent using the .prefix__input selector:

.select__input {
  color: transparent;
}

Answered By - Bas van der Linden