DataTables：更改选择器的框架，字体和对齐方式

我在调整DataTables中的页面选择器时遇到问题。DataTables：更改选择器的框架，字体和对齐方式

我能够将背景颜色更改为黑色，但其周围的框架仍然是蓝色。与未选择页面的字体颜色和“下一步”按钮相同。

你能帮我吗？

td{ 
    padding: 3px !important; 
} 

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

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

来源

2017-07-28 greencucumber

您还需要考虑按钮的聚焦状态：

$(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>

来源

2017-07-28 12:40:24 fen1x

谢谢您的帮助！ – greencucumber

DataTables：更改选择器的框架，字体和对齐方式

回答

相关问题