Hi I use to set the date the package react-dropdown-date. I want to change the background color when selecting the year. Unfortunately this does not work. I don’t know why. If I simply change option
, then the change is applied, but with option:hover
it is ignored.
import { React, useState } from "react";
import { YearPicker, MonthPicker, DayPicker } from "react-dropdown-date";
import "./Datum.css";
function DatumElement() {
var [datum, setDatum] = useState({
year: null,
month: null,
day: null,
});
return (
<div className="datumContainer">
<YearPicker
className="datum"
defaultValue={"select year"}
start={1970} // default is 1900
end={2020} // default is current year
reverse // default is ASCENDING
onChange={(year) => {
// mandatory
this.setDatum({ ...datum, year: year });
}}
/>
</div>
);
}
export default DatumElement;
.datumContainer{
display:flex;
flex-direction:row;
justify-content: flex start;
gap:2vw
}
select {
height:1.5vw;
width:5vw;
font-size:0.8vw;
border:none;
border-radius:20px;
font-family: 'Sunflower', sans-serif;
font-weight: 900;
}
option:hover{
background-color: red;
}
I tried to find documentation about the package and tested how to change the tag options
2
Answers
This maybe because library use inline styles or library css can be defined after your css. This library also may use !important. One way around is define your style as !important or you can show us this element in chrome devtools with checked flag hover. Also better change this tag with some of classname as ".some-one-class option"
You might want to check this thread. Long story short, a single select can’t be styled because the control goes to the OS.