How can I customize input date with css

Question

I am trying customize my input date pick like this design here:

here is my following code and default design:

  <input
    type="date"
    name="date"
    defaultValue={currentDate || dateInput}
    onChange={(e) => setDateInput(e.target.value)}
    required
  />

How can I edit it with css or scss?

Answer 1

You need to add class:

<input
    className="datePicker"
    type="date"
    name="date"
    defaultValue={currentDate || dateInput}
    onChange={(e) => setDateInput(e.target.value)}
    required
  />

And in css:

.datePicker {
  background-color: red;

}