React自定义Select组件默认禁用选项文字颜色修改求助

问题说明 #

自行用JSX构建了Select组件（未使用react-select），组件内有一个禁用的默认选项“Choose a flaire”，希望将其设置为与表单其他占位符一致的灰色。当前展开选项时该文字为灰色，但未操作表单时显示为黑色，需要调整。

解决方案 #

利用CSS的:invalid伪类（因select设置了required属性，当value为空时会处于invalid状态），给初始状态的select设置灰色文字；当用户选中有效选项后，select变为valid状态，文字自动恢复默认颜色。

修改后的CSS代码 #

/*blogPostForm */
.postForm {
  font-family: "Montserrat", sans-serif;
  color: white;
  background-color: var(--color2);
  border-radius: 10px;
  margin-top: 10px;
  width: 80%;
  max-width: 750px;

  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "flaire"
    "title"
    "post"
    "buttons";
  grid-gap: 5px;
}

.postFormHeader {
  justify-self: center;
}

.flaireSelect {
  font-family: "Montserrat", sans-serif;
  justify-self: center;
  width: 150px;
  height: 35px;
  text-align: center;
}

/* 添加这部分样式，匹配表单占位符灰色 */
.flaireSelect:invalid {
  color: #999; /* 可替换为和input placeholder一致的灰色值 */
}

.titleBox {
  font-family: "Montserrat", sans-serif;
  height: 40px;
  margin: 10px;
}

.textBox {
  font-family: "Montserrat", sans-serif;
  height: 100px;
  margin: 10px;
  resize: vertical;
}

.blogPostFormButtonContainer {
  font-family: "Montserrat", sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-bottom: 10px;
}

.blogPostSubmit {
  font-family: "Montserrat", sans-serif;
  width: 35%;
  margin: 5px;
  height: 35px;
}

.blogPostCancel {
  font-family: "Montserrat", sans-serif;
  width: 35%;
  margin: 5px;
  height: 35px;
}

原理说明 #

• select设置了required属性，当formState.flaire为空字符串时，select处于:invalid状态，此时应用灰色文字样式。
• 用户选中任意有效选项后，formState.flaire被赋值为对应选项值，select变为:valid状态，文字自动恢复默认颜色。
• 禁用的option在展开时本身已为灰色，无需额外修改。

内容的提问来源于stack exchange，提问作者Nick Johnson