ReactJS 在选择选项控件中更改所选选项的颜色答案

【问题标题】：ReactJS change color of the selected option in a select option controlReactJS 在选择选项控件中更改所选选项的颜色
【发布时间】：2018-06-05 23:14:52
【问题描述】：

我正在尝试使用 ReactJS 设置控件的文本和背景颜色样式。这是我的 ReactJs 代码：

   import React, { Component } from "react";

   import "./Test.css";

    class Test extends Component {

      render = () => {

        return (  
            <select size={5} value={'3'}>
              <option className='opt' value='1'>Option 1</option>
              <option className='opt' value='2'>Option 1</option>
              <option className='opt' value='3'>Option 1</option>
              <option className='opt' value='4'>Option 1</option>
              <option className='opt' value='5'>Option 1</option>
            </select>

          );
      }
    }

还有我的 CSS：

.opt { 
    color: red;
    background-color: white;
}

.opt:checked {
    color: white;
    background-color: red;
}

无论我尝试什么，我都无法设置所选行的样式（示例中为“3”）。它仍然是灰色的，我希望它具有带有白色字符的红色背景。

如何设置所选行的样式？

【问题讨论】：

select size='5' 同样，select 没有 value 属性。尝试内联 css 看看是否可行
DCR，我正在使用 ReactJS，而不是纯 HTML...select 具有 value 属性...

标签： html css reactjs

【解决方案1】：

JSX：

class Test extends React.Component {
  state = {
    option: "3"
  }

  handleOptionsChange = (event) => {
    this.setState({
      option: event.target.value
    });
  }

  render () {
    return (  
        <select size={5} value={this.state.option} onChange={this.handleOptionsChange}>
          <option className="opt" value='1'>Option 1</option>
          <option className="opt" value='2'>Option 2</option>
          <option className="opt" value='3'>Option 3</option>
          <option className="opt" value='4'>Option 4</option>
          <option className="opt" value='5'>Option 5</option>
        </select>
     );
  }

这是 CSS：

option {
  background: #ffffff;
  color: #ff0000;
}

select option:checked,
select option:focus {
  background: linear-gradient(#ff0000, #ff0000);
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}

这是一个工作演示：https://jsfiddle.net/69z2wepo/96971/

【讨论】：