0
Je crée un menu déroulant dans React. Je souhaite que toutes les options de menu soient colorées par défaut, puis lorsque je sélectionne une option, je veux que l'option sélectionnée/cochée soit colorée en violet. J'ai Réagir 15.6.2.La modification de l'option de liste déroulante dans React ne s'applique pas au ciblage par style de l'option sélectionnée
class BridesmaidsNumber extends Component {
handleChange(e) {
console.log("change in bridesmaids number" + e);
this.props.onUserDataChange(e.target.name, e.target.value);
}
render() {
let {bridesmaids_number} = this.props.userData;
let optionsState = bridesmaids_number == "" ? "none" : bridesmaids_number;
return (
<div className="cell">
<select className={!bridesmaids_number.length ? 'placeholder-select' : ''}
name="bridesmaids_number"
id="bridesmaids_number"
onChange={this.handleChange.bind(this)}
value={optionsState}>
<option value="none" disabled>Number of Bridesmaids in the wedding</option>
<option value="0" checked={optionsState == 0}>Not sure yet</option>
<option value="1" checked={optionsState == 1}>1</option>
<option value="2" checked={optionsState == 2}>2</option>
<option value="3" checked={optionsState == 3}>3</option>
</select>
</div>
);
}
}
Voici le CSS
select option {
color: purple;
}
select:not(:checked) {
color: tomato;
}
select:checked {
color: purple;
}
option:hover,
option:focus,
option:active,
option:checked {
color: purple;
}