Datatables分页组件点击页码背景未完全高亮的CSS调整方案咨询

Hey there! I see the issue you're having—your active pagination number only highlights the text instead of the entire button area. Let's tweak your CSS to fix that right up.

The Problem with Your Current Code #

Right now, you're only styling the .page-link inside the active .page-item, but DataTables' default pagination structure has the .page-item (the list item) with its own spacing/border, and the .page-link (the clickable anchor) sits inside it. Your current styles only target the link itself, so the surrounding area of the list item doesn't get the background color.

Updated CSS Solution #

Here's the adjusted code that will make the entire pagination button highlight when active:

#example_paginate { 
  color:rgba(255, 110, 0, 0.8); 
  font-size:19px; 
  font-family:"Trebuchet MS"; 
}

/* Style the active list item to cover the full area */
.page-item.active {
  background-color: #000 !important; /* Set your desired active background */
  border: none !important; /* Remove default border from the list item */
}

/* Make the link inside the active item inherit the background and remove its own styles */
.page-item.active .page-link {
  color: #fff !important; 
  background-color: transparent !important; /* Let the parent's background show through */
  border-color: transparent !important; /* Remove the link's border */
}

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

.page-link:hover {
  color: #fff !important; 
  background-color: #000 !important; 
  border-color: #000 !important; 
}

/* Optional: Remove default margins between pagination items for a tighter look */
.page-item {
  margin: 0;
}

What Changed? #

• We added styles directly to .page-item.active to set the background color for the entire pagination button area.
• We made the .page-link inside the active item transparent, so it doesn't block the parent's background color.
• We removed any default borders on the active list item to ensure the background fills the whole space.

This should make your active pagination button show a full black background (matching your original intent) instead of just highlighting the text.

内容的提问来源于stack exchange，提问作者usert4jju7