2017-10-13 30 views
0

私は以下のdaterangepickerコードを持っています。コードは機能していますが、月、年、トグルボタンは非常に見やすいものです。私はこれでうまく動作していないブートストラップテーマを使用しています。私は月、年、トグルボタンを見やすくするためにCSSを変更する方法を見つけようとしています。daterangepicker月と年が見えにくい

私は enter image description here

を見ています何これは、コメントが働いているので、答えとしてここでそれをマーキング enter image description here

<!-- Include Required Prerequisites --> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> 
<!-- Include Date Range Picker --> 
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> 


<form class="" action="{{ url_for('about') }}" name="Item_1" method="POST"> 
    <input style="width: 30%" type="text" name="daterange" value="01/01/2015 01/31/2015" /> 
    <button type="submit" class="btn btn-success">Submit</button> 

    </form> 



<script type="text/javascript"> 
$('input[name="daterange"]').daterangepicker(
{ 
    locale: { 
     format: 'MM-DD-YYYY' 
    }, 
    startDate: '01-01-2017', 
    endDate: moment() 
}, 
function(start, end, label) { 
    console.log("A new date range was chosen: " + start.format('MM-DD-YYYY') + ' to ' + end.format('MM-DD-YYYY')); 
}); 
</script> 
+1

あなたが '.calendar-table、.glyphicon-calendar {color:#000!important;}'のようなことをすれば、それはクリアされますか?もしそうなら、それはそれらの要素の 'color'属性のように見えますが、私はdevツールを使って、既存のCSSルールが明るい色に変更していることを知り、重要!あなたのコードサンプルからは、それを明るい色に変更するものは何も表示されません。同じファイルにインラインCSSがあるのでしょうか、別のスタイルシートを引っ張りますか? –

+0

これは実際に線量作業です。どうもありがとうございます。 – Matt

答えて

1

どのように見えるかです。 color css属性は、グリフコンの色を含むfont-colorsを制御します。そのため、対応するテーブル要素とグリフコンをcolor: #000またはcolor: blackに変更することが修正されました。 !importantを追加

は、単純に( - ここでは明らかにそうではありませんでした彼らは、より具体的なセレクタ、または同じセレクタが、このルールの後に現れるのいずれかによって、あまりにも!importantを使用して優先順位を持っていない限り)他のCSSファイルは色を変えないことを確認します。

.calendar-table, .glyphicon-calendar {color: #000 !important;}