0

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

Aleksandar
  • 844
  • 1
  • 8
  • 18
Razielruss
  • 139
  • 1
  • 7

2 Answers2

0

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"

Джамиль Мамедов
  • 1
  • 1
0

You might want to check this thread. Long story short, a single select can't be styled because the control goes to the OS.

PrdX
  • 47
  • 8