CSS日期选择器相邻选中数字（横竖）样式合并问题咨询

Hey there! Let's tackle this issue where your selected numbers (like 48-49-50 or 38-39-40-41) need their active styles merged instead of showing separate borders. The core problem right now is that each .active element has its own independent border, which creates overlaps when items are adjacent. Here's a practical solution combining JavaScript and CSS to get the design-matching result:

Step 1: Set Up Base Styles #

First, make sure your number items have consistent base styling, including borders and rounded corners. This gives us a foundation to modify later:

.number-item {
  width: 40px; /* Adjust to your needs */
  height: 40px;
  border: 2px solid #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.number-item.active {
  background-color: #e6f7ff; /* Your active background color */
  border-color: #1890ff; /* Your active border color */
}

Step 2: Add Dynamic Border/Roundness Control with JavaScript #

CSS alone can't easily handle vertical adjacent items (since they're not immediate siblings in the DOM), so we'll use JS to detect adjacent active elements and apply helper classes:

// Call this function every time you add/remove the "active" class
const updateActiveItemStyles = () => {
  const allItems = document.querySelectorAll('.number-item');
  const activeItems = document.querySelectorAll('.number-item.active');
  const itemsPerRow = 10; // Replace with your actual items per row

  activeItems.forEach(item => {
    const itemIndex = Array.from(allItems).indexOf(item);
    
    // Check for adjacent active items
    const hasLeftActive = itemIndex > 0 && allItems[itemIndex - 1].classList.contains('active');
    const hasRightActive = itemIndex < allItems.length - 1 && allItems[itemIndex + 1].classList.contains('active');
    const hasTopActive = itemIndex >= itemsPerRow && allItems[itemIndex - itemsPerRow].classList.contains('active');
    const hasBottomActive = itemIndex + itemsPerRow < allItems.length && allItems[itemIndex + itemsPerRow].classList.contains('active');

    // Toggle helper classes to remove overlapping borders
    item.classList.toggle('no-border-left', hasLeftActive);
    item.classList.toggle('no-border-right', hasRightActive);
    item.classList.toggle('no-border-top', hasTopActive);
    item.classList.toggle('no-border-bottom', hasBottomActive);

    // Restore rounded corners only on the outermost edges
    item.classList.toggle('round-top-left', !hasTopActive && !hasLeftActive);
    item.classList.toggle('round-top-right', !hasTopActive && !hasRightActive);
    item.classList.toggle('round-bottom-left', !hasBottomActive && !hasLeftActive);
    item.classList.toggle('round-bottom-right', !hasBottomActive && !hasRightActive);
  });
};

// Update your AddClass function to trigger the style update
function AddClass(element) {
  element.classList.add('active');
  updateActiveItemStyles();
}

// Don't forget to call it when removing the class too!
function RemoveClass(element) {
  element.classList.remove('active');
  updateActiveItemStyles();
}

Step 3: Style the Helper Classes #

Now add CSS rules to apply the border and roundness changes based on the helper classes:

/* Remove overlapping borders */
.number-item.active.no-border-left {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.number-item.active.no-border-right {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.number-item.active.no-border-top {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.number-item.active.no-border-bottom {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Restore rounded corners for outer edges */
.number-item.active.round-top-left {
  border-top-left-radius: 8px;
}
.number-item.active.round-top-right {
  border-top-right-radius: 8px;
}
.number-item.active.round-bottom-left {
  border-bottom-left-radius: 8px;
}
.number-item.active.round-bottom-right {
  border-bottom-right-radius: 8px;
}

How It Works #

• Every time you add or remove the .active class, the JS function checks each active item's four neighbors.
• It adds helper classes to remove borders where items are adjacent, so no overlapping lines show.
• It also restores rounded corners only on the outermost edges of the selected group, matching the merged look in your design.

Just adjust values like itemsPerRow, colors, and dimensions to fit your specific layout and design system!

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