如何在 React Select 库中删除 Select 上的文本光标？

Question

我找不到删除图片中闪烁的文本光标的方法。它在 Select 聚焦时显示。

这是我的 select 代码：

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

Answer 1

光标出现是因为 Select 组件使用输入。

如果您将 classNamePrefix 道具添加到 Select 组件，您可以使用 css 定位输入 div 并将颜色更改为 transparent，div 中的输入继承为它的颜色：

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

使用 .prefix__input 选择器将输入颜色更改为透明：

.select__input {
  color: transparent;
}

Answer 2

找到里面有 input 标签的 class 并更改 CSS

.Select-input > input {
  color: transparent;
  text-shadow: 0 0 0 #2196f3;
 }

.Select-input > input:focus {
 outline: none;
}

如何在 React Select 库中删除 Select 上的文本光标？

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

javascript

css

reactjs

react-select