Question

我正在尝试使用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”）。它仍然是灰色的，我希望它有红色背景和白色字符。

如何设置所选行的样式？

Answer 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/

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

1 个答案: