Wie Hintergrundfarbe von Datepicker Form in Materialise Design ändern

Question

Ich benutze Datumsauswahl in materialisieren Design. Aber ich möchte die Farbe der geöffneten Datumsauswahl ändern.

SCREEN SHOT.

$('.datepicker').pickadate({ 
 
    selectMonths: true, // Creates a dropdown to control month 
 
    selectYears: 15 // Creates a dropdown of 15 years to control year 
 
    }); 
 
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 
 

 
    <!-- Compiled and minified JavaScript --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
 
    
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col s6 m6 l6"> 
 
     SELECT DATE 
 

 
     <input type="date" class="datepicker"> 
 
    </div> 
 
    </div> 
 
</div>

Ich habe einen Link gesehen, aber ich konnte dieses Problem nicht lösen. How to change the cell color of a jquery datepicker

JSFIDDLE:
https://jsfiddle.net/varunPes/6smvtLxt/

Answer 1

CSS können Sie Farbe der Datumsauswahl ändern:

Versuchen:

https://jsfiddle.net/ncrmyt6n/

.picker__date-display { 
    background-color:blue; 
} 
.picker__weekday-display { 
    background-color:red; 
} 
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { 
    background-color:blue; 
} 

Answer 2

Sie können das CSS von Materialize.css überschreiben und diese Zeilen in Ihre benutzerdefinierte CSS-Datei einfügen.

.picker__date-display 
{ 
    background-color: red; 
} 

.picker__day--selected, .picker__day--selected:hover, .picker-- focused  .picker__day--selected 
{ 
    background-color: red; 
}