如何自定义Reactstrap Input Select下拉选择框样式

问题场景 #

需要实现三类样式调整：

• 移除组件默认边框
• 增加阴影效果
• 修改Option选项悬浮态颜色
  直接重写Select类样式未生效，基础业务代码如下：

<FormGroup>
  <Label for="exampleSelect">Select</Label>
  <Input type="select" name="select" id="exampleSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </Input>
</FormGroup>

• 默认组件效果：
• 目标实现效果：

失效原因 #

Reactstrap的Input是对原生select的封装，自带Bootstrap基础样式，默认样式选择器优先级高于用户自定义的单类名样式；同时原生option的下拉弹出层由浏览器内核直接渲染，CSS自定义存在一定限制，权重不足时会被系统默认样式覆盖。

实现步骤 #

1. 覆盖默认边框、添加阴影 #

通过组合类名选择器提高样式权重，兼容不同Reactstrap版本的类名差异（旧版用form-control、新版select类型自动加form-select类），无需滥用!important：

/* 全局样式或非scoped环境下可直接使用，scoped/css module环境下注意用对应样式穿透语法 */
#exampleSelect.form-select,
#exampleSelect.form-control {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  background-position: right 0.75rem center;
}
/* 覆盖焦点态默认高亮边框 */
#exampleSelect.form-select:focus,
#exampleSelect.form-control:focus {
  border: none;
  outline: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

如果不想用id选择器，也可以给Input组件传入自定义className，用组合类选择器实现同等权重：

<Input 
  type="select" 
  name="select" 
  id="exampleSelect"
  className="custom-select"
>

对应样式把选择器替换为.custom-select.form-select, .custom-select.form-control即可。

2. Option选项样式调整 #

原生option仅支持修改基础文字、背景色，webkit内核浏览器可通过以下代码实现悬浮态颜色修改：

#exampleSelect option {
  padding: 0.4rem 0.75rem;
}
#exampleSelect option:checked {
  background: #e3f2fd;
  color: #1976d2;
}
#exampleSelect option:hover,
#exampleSelect option:focus {
  background-color: #f5f5f5;
  color: #212121;
}

如果需要完全自定义下拉动效、悬浮样式和设计稿1:1匹配，建议替换为react-select这类完全由JS渲染下拉层的组件，原生select的弹出层受浏览器渲染限制，无法通过CSS突破系统默认样式约束。

内容的提问来源于stack exchange，提问作者Pasindu Dineth Peiris