2

I found this question on StackOverflow for changing the pagination color of datatables.

And I tried the provided solution with some dummy edits:

.paging_full_numbers a.paginate_button {
    color: pink !important;
    background-color: white !important;
}
.paging_full_numbers a.paginate_active {
    color: green !important;
    background-color: green !important;
}

And it did not work.

I also tried with the second solution provided:

.page-item.active .page-link {
    color: #fff !important;
    background-color: #193D4C !important;
    border-color: #000 !important; 
}

.page-link {
    color: #193D4C !important;
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important; 
}

.page-link:hover {
    color: white !important;
    background-color: #193D4C !important;
    border-color: #193D4C !important; 
}

And it's getting close to what I want but randomly there is a black css effect that I don't know how to get rid of.

Current result:

enter image description here

Live DEMO of the code

How can I get rid of this black box when I hover over some page?

Cheknov
  • 1,892
  • 6
  • 28
  • 55

2 Answers2

3

Background color is showing on hover because of datatable jquery. we can't make changes on core library. To get rid of this you need to use background:transparent; on parent class with important.

Add this style into your CSS file.

.paginate_button:hover
{
  background:transparent !important;
  border:none !important;
}

enter image description here

Apps Maven
  • 1,314
  • 1
  • 4
  • 17
2

You can override the background color and border that's added using the following css code:

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none !important;
    border: none !important;
}
nad
  • 1,068
  • 6
  • 16