Struggling to customize the text and background color of a control using ReactJS. Take a look at my code snippet:
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>
);
}
}
Here's my CSS styles:
.opt {
color: red;
background-color: white;
}
.opt:checked {
color: white;
background-color: red;
}
Despite all efforts, I'm unable to change the style of the selected row ('3' in the example), which remains gray instead of having a red background with white characters. Any suggestions on how to achieve this?