jquery - DataTables: Change frame, font and alignment of selector -
i have problems adjusting page selector datatables.
i able change background color black frame around still blue. same font color of pages not selected , "next" button.
can me?
td{ padding: 3px !important; } .selector:checked{ background-color:black !important; } .pagination > li.active > a{ background-color:black !important; }
you need consider focused state of button:
$(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"> <!-- <div class="navbar-header"> <a class="navbar-brand" href="#">overview</a> </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>
Comments
Post a Comment