DataTables: Frame, Schriftart und Ausrichtung des Selektors ändern

Ich habe Probleme mit dem Anpassen der Seitenauswahl aus DataTables.DataTables: Frame, Schriftart und Ausrichtung des Selektors ändern

Ich konnte die Hintergrundfarbe auf schwarz ändern, aber der Rahmen um sie herum ist immer noch blau. Gleiches gilt für die Schriftfarbe der nicht ausgewählten Seiten und die Schaltfläche "Weiter".

Können Sie mir helfen?

JSFiddle

td{ 
    padding: 3px !important; 
} 

.selector:checked{ 
background-color:black !important; 
} 

.pagination > li.active > a{ 
     background-color:black !important; 
}

Quelle

2017-07-28 greencucumber

Sie müssen auch fokussierte Zustand der Taste berücksichtigen:

$(document).ready(function() { 
 

 
    $("#table1").DataTable({ 
 
    searching: false 
 
    }); 
 
});

td { 
 
    padding: 3px !important; 
 
} 
 

 
selector:checked { 
 
    background-color: black !important; 
 
} 
 

 
.pagination>li.active>a { 
 
    background-color: black !important; 
 
} 
 

 
.pagination>li>a:focus, 
 
.pagination>li.active>a { 
 
    outline-color: red; 
 
    border-color:red; 
 
} 
 

 
.dataTables_paginate>.pagination>li:not(.active)>a{ 
 
    color: green; 
 
}

<div class="dataTables_paginate paging_simple_numbers" id="table1_paginate"> 
 
    <ul class="pagination"> 
 
    <li class="paginate_button previous disabled" id="table1_previous"><a href="#" aria-controls="table1" data-dt-idx="0" tabindex="0">Previous</a></li> 
 
    <li class="paginate_button active"><a href="#" aria-controls="table1" data-dt-idx="1" tabindex="0">1</a></li> 
 
    <li class="paginate_button "><a href="#" aria-controls="table1" data-dt-idx="2" tabindex="0">2</a></li> 
 
    <li class="paginate_button "><a href="#" aria-controls="table1" data-dt-idx="3" tabindex="0">3</a></li> 
 
    <li class="paginate_button "><a href="#" aria-controls="table1" data-dt-idx="4" tabindex="0">4</a></li> 
 
    <li class="paginate_button "><a href="#" aria-controls="table1" data-dt-idx="5" tabindex="0">5</a></li> 
 
    <li class="paginate_button disabled" id="table1_ellipsis"><a href="#" aria-controls="table1" data-dt-idx="6" tabindex="0">…</a></li> 
 
    <li class="paginate_button "><a href="#" aria-controls="table1" data-dt-idx="7" tabindex="0">20</a></li> 
 
    <li class="paginate_button next" id="table1_next"><a href="#" aria-controls="table1" data-dt-idx="8" tabindex="0">Next</a></li> 
 
    </ul> 
 
</div> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> 
 

 

 

 

 

 
<title>Table</title> 
 

 
<body> 
 
    <nav class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container-fluid"> 
 

 
     <!-- \t \t <div class="navbar-header"> 
 
\t \t <a class="navbar-brand" href="#">Overview</a> 
 
\t \t </div> --> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Overview</a></li> 
 
     <li class="inactive"><a href="#">example</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 

 
    <div class="container-fluid"> 
 
    <table id="table1" class="table table-striped table-bordered" cellspacing="0" width="50"> 
 
     <thead class="thead-inverse"> 
 

 
     <tr style="border-width: 1px"> 
 
      <th class="text-nowrap">example1</th> 
 
      <th class="text-nowrap">example2</th> 
 
      <th class="text-nowrap">example3</th> 
 
      <th class="text-nowrap">example4</th> 
 
      <th class="text-nowrap">example5</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 
     <tr style="border-width: 1px;"> 
 
      <td>1</td> 
 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td> 
 
      <td>Aliquam interdum est vel ligula tempor pellentesque.</td> 
 
      <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>2</td> 
 
      <td>vel ultrices sem sodales at</td> 
 
      <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td> 
 
      <td>Cras accumsan accumsan elit sit amet posuere</td> 
 
      <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td> 
 
     </tr> 
 

 
     <tr style="border-width: 1px;"> 
 
      <td>3</td> 
 
      <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td> 
 
      <td>Praesent tristique vitae orci eget interdum.</td> 
 
      <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td> 
 
      <td> Sed ut venenatis ligula, eget faucibus sapien</td> 
 
     </tr> 
 

 

 

 

 

 
     </tbody> 
 
    </table> 
 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2017-07-28 12:40:24 fen1x

Vielen Dank für Ihre Hilfe! – greencucumber

DataTables: Frame, Schriftart und Ausrichtung des Selektors ändern

Antwort

Verwandte Themen