你可以在这里找到http://codepen.io/anon/pen/BjqxOq的完整代码
我正在使用Materialize CSS显示一个登录表单,您可以在上面的Codepen中看到。它有两个按钮登录和注册。单击“注册”时,将显示一个包含必要注册字段的模式,其中一个是物化日期时间选择器。
是否有可能更改datetimepicker的默认正文颜色?
HTML
<div class="row">
<div class="input-field col s6">Date of Birth
<input type="date" class="datepicker ">
</div>
</div>
JS
$(document).ready(function(){
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
});
materializecss datepicker有一个div,其中有一个名为"picker__box"
的类。如果为此类设置背景颜色,则datepicker将采用此颜色,如下面的codepen中所示。
http://codepen.io/anon/pen/OMBoMz
.picker__box{
background-color: #CCC;
}
编辑
要更改上半身颜色,还必须为另外两个类设置背景颜色:
.picker__date-display, .picker__weekday-display{
background-color: #CCC;
}
我希望这有帮助!
我注意到有些答案不起作用我已经搜索了一下,这就是结果。根据此更改您的CSS文件。我已经添加了下面的所有文字随意复制。
希望能帮助到你...
.picker__date-display { background-color: #6d4e7a; }
.picker__day.picker__day--today { color: red; }
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { background-color: #6d4e7a;}
.picker__close { color: #6d4e7a !important;}
.picker__today { color: #6d4e7a !important;}
.clockpicker-tick:hover { background: #6d4e7a !important; }
.clockpicker-canvas line { stroke: #6d4e7a !important; }
.clockpicker-canvas-bearing { fill: #6d4e7a !important; }
.clockpicker-canvas-bg { fill: #6d4e7a !important; }
编辑:这不是改变身体,而是身体的一切,让身体变白
不能评论。
Allan Pereira解决方案对我不起作用,一切都按照我的颜色(甚至是白色背景)。
我用过这个
.picker__date-display, .picker__weekday-display{
background-color: rgba(66, 133, 244, 0.79);
}
div.picker__day.picker__day--infocus.picker__day--selected.picker__day--highlighted {
background-color: rgba(66, 133, 244, 0.79);
}
button.picker__today, button.picker__close {
color: rgba(66, 133, 244, 0.79);
}
(颜色很漂亮)
这段代码对我有用,可以改变采摘颜色。
.timepicker-canvas line {
stroke: red;
}
.timepicker-canvas-bg,
.timepicker-canvas-bearing {
fill: red;
}