2016-12-20 37 views
1

私は現在、.Net MVC WebアプリケーションにJQuery Datatableを使用しています。JQuery Datatable - ColvisボタンのCSSを操作する

UIにデフォルトのcolvisボタンを追加しました。

  1. は、我々はこれらのCSSを操作することができます:

    私は2つの質問を持っています。グラデーションを変更したり、選択したものの色を区別しない(明るい色を選択したものは暗い色に、明るい色は選択したものを明るい色に変更するなど)。

  2. このリストにスクロールバーを追加できますか?完全なリストを表示するには、ページ全体

私は、次のコードを使用してcolvisボタンのCSSを操作することができました:?

.dataTables_wrapper .dt-buttons { //css code here} 

をしかし、私は操作することが解決策に到達することができませんでしよカラム名ボタンは 'colvis'のときトンをクリックします。

答えて

0

最終的には動作しました。

buttons.dataTables.min.cssファイルを変更しました。

は、ここでは、コードです:

//後藤ライン164とお好みに合わせて背景画像の値を変更します。表示される列のボタンの色が変更されます。私はそれをGreen - #76b900に変更しました。

div.dt-button-collection button.dt-button:active:not(.disabled), div.dt-button-collection button.dt-button.active:not(.disabled), div.dt-button-collection div.dt-button:active:not(.disabled), div.dt-button-collection div.dt-button.active:not(.disabled), div.dt-button-collection a.dt-button:active:not(.disabled), div.dt-button-collection a.dt-button.active:not(.disabled) { 
      background-color: #dadada; 
      background-image: -webkit-linear-gradient(top, #76b900 0%, #dadada 100%); 
      background-image: -moz-linear-gradient(top, #76b900 0%, #dadada 100%); 
      background-image: -ms-linear-gradient(top, #76b900 0%, #dadada 100%); 
      background-image: -o-linear-gradient(top, #76b900 0%, #dadada 100%); 
      background-image: linear-gradient(to bottom, #76b900 0%, #dadada 100%); 
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f0f0f0', EndColorStr='#dadada'); 
      box-shadow: inset 1px 1px 3px #666; 
      font-family: 'Trebuchet MS',sans-serif; 
      font-size: 12px; 
     } 

//私は#ADFF2F

button.dt-button:active:not(.disabled):hover:not(.disabled), button.dt-button.active:not(.disabled):hover:not(.disabled), div.dt-button:active:not(.disabled):hover:not(.disabled), div.dt-button.active:not(.disabled):hover:not(.disabled), a.dt-button:active:not(.disabled):hover:not(.disabled), a.dt-button.active:not(.disabled):hover:not(.disabled) { 
      box-shadow: inset 1px 1px 3px #999999; 
      background-color: #cccccc; 
      background-image: -webkit-linear-gradient(top, #ADFF2F 0%, #ccc 100%); 
      background-image: -moz-linear-gradient(top, #ADFF2F 0%, #ccc 100%); 
      background-image: -ms-linear-gradient(top, #ADFF2F 0%, #ccc 100%); 
      background-image: -o-linear-gradient(top, #ADFF2F 0%, #ccc 100%); 
      background-image: linear-gradient(to bottom, #ADFF2F 0%, #ccc 100%); 
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#eaeaea', EndColorStr='#cccccc'); 
     } 
+0

にそれを変更した上で、ホバリング後藤ライン80色を変更するにはかかわらず、スクロールバーを追加できませんでした。 –

関連する問題