title: jQuery DataTables: how to change pagination active color?
body: <p>I am using the jQuery DataTables plugin  and would like to change the color of the pagination.</p>
  
  <p>With CSS  I would like to change both font color 、hover font color and active page color .</p>
  
  <p><strong>The pagination code looks as follows:</strong></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $.fn.dataTable.ext.errMode = 'none';
       var table = $('#users').DataTable({
       "columnDefs": [
          { "visible": false, "targets": 1 }
        ],
       "columns": [
          { "data": "user"},
          { "data": "name"}
      ],
  
      "processing": true,
      "serverSide": true,
       "searching": true,
       "paging": true,
  
      "ajax": {
         url: "get_info.php",
         type: 'POST'
  
         },
      "order": [[ 2, 'asc' ]],
       "lengthMenu": [
          [25, 50, 100],
          [25, 50, 100]
        ],
       "iDisplayLength": 20,
  
      "drawCallback": function ( settings ) {
          var api = this.api();
          var rows = api.rows( {page:'current'} ).nodes();
          var last=null;
  
          api.column(1, {page:'current'} ).data().each( function ( group, i ) {
              if ( last !== group ) {
                  $(rows).eq( i ).before(
                      '&lt;tr class="group"&gt;&lt;td colspan="8"&gt;'+group+'&lt;/td&gt;&lt;/tr&gt;'
                  );
  
                  last = group;
              }
          } );
      }
  } );
  
  // Order by the grouping
  $('#devices tbody').on( 'click', 'tr.group', function () {
      var currentOrder = table.order()[0];
      if ( currentOrder[0] === 2 &amp;&amp; currentOrder[1] === 'asc' ) {
          table.order( [ 2, 'desc' ] ).draw();
      }
      else {
          table.order( [ 2, 'asc' ] ).draw();
      }
    } );
  } );
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
                    </p>
  
  <pre><code>                &lt;tr&gt;
                    &lt;th&gt;user&lt;/th&gt;
  
                    &lt;th&gt;name&lt;/th&gt;
  
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tfoot&gt;
                  &lt;tr&gt;
                    &lt;th&gt;user&lt;/th&gt;
  
                    &lt;th&gt;name&lt;/th&gt;
  
                  &lt;/tr&gt;
                &lt;/tfoot&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p>Thanks for any help with this,</p>