如何将HTML select下拉框改为带箭头切换的分区域样式？

Absolutely! You can turn that basic dropdown into an interactive, calendar-inspired time picker with arrow navigation—perfect for handling more time options without cluttering the UI. Here's a complete, no-library implementation using vanilla HTML, CSS, and JS:

Step 1: The HTML Structure #

We'll replace the <select> with a custom container that includes a display area, up/down arrows, and a hidden input to hold the selected value (so it still works with form submissions):

<div class="time-picker" id="timePicker">
  <!-- Display area for selected time -->
  <div class="time-display" id="timeDisplay">6am</div>
  <!-- Arrow controls -->
  <button class="time-arrow time-arrow-up" id="arrowUp">&#9650;</button>
  <button class="time-arrow time-arrow-down" id="arrowDown">&#9660;</button>
  <!-- Hidden input to submit the selected value with the form -->
  <input type="hidden" name="time" id="timeInput" value="6">
</div>

Step 2: Style It with CSS #

This will make it look like a compact, calendar-style picker with clickable arrows:

.time-picker {
  position: relative;
  width: 174px;
  height: 27px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  background: white;
  cursor: pointer;
}

.time-display {
  flex-grow: 1;
  text-align: center;
  font-size: 14px;
  line-height: 27px;
}

.time-arrow {
  border: none;
  background: #f0f0f0;
  width: 24px;
  height: 13px;
  font-size: 10px;
  cursor: pointer;
  padding: 0;
}

.time-arrow-up {
  border-bottom: 1px solid #ccc;
  border-top-right-radius: 4px;
}

.time-arrow-down {
  border-bottom-right-radius: 4px;
}

.time-arrow:hover {
  background: #e0e0e0;
}

Step 3: Add JavaScript for Arrow Navigation #

This logic will handle switching between time options when the arrows are clicked, and keep the hidden input updated:

// Define your time options (add as many as you need!)
const timeOptions = [
  { label: "6am", value: "6" },
  { label: "7am", value: "7" },
  { label: "8am", value: "8" },
  { label: "9am", value: "9" },
  { label: "10am", value: "10" },
  { label: "11am", value: "11" },
  { label: "12pm", value: "12" },
  // Add more times here
];

// Get elements from the DOM
const timeDisplay = document.getElementById('timeDisplay');
const timeInput = document.getElementById('timeInput');
const arrowUp = document.getElementById('arrowUp');
const arrowDown = document.getElementById('arrowDown');

// Track current selected index
let currentIndex = 0;

// Update the display and input with the current selected time
function updateTimeDisplay() {
  const selectedTime = timeOptions[currentIndex];
  timeDisplay.textContent = selectedTime.label;
  timeInput.value = selectedTime.value;
}

// Handle up arrow click
arrowUp.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + timeOptions.length) % timeOptions.length;
  updateTimeDisplay();
});

// Handle down arrow click
arrowDown.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % timeOptions.length;
  updateTimeDisplay();
});

// Initialize the display on page load
updateTimeDisplay();

Key Notes: #

• Form Compatibility: The hidden <input> with name="time" ensures the selected value is still submitted with your form, just like the original <select>.
• Scalability: You can easily add more time options to the timeOptions array—no need to modify the HTML or CSS.
• Fix for Duplicate Values: I noticed your original <select> had duplicate value attributes (6am and 7am both used value="6"). The example above uses values that match the hour for consistency, but you can adjust the value properties in timeOptions to match your needs.

This implementation is lightweight, customizable, and works across all modern browsers. You can tweak the CSS colors, sizes, or arrow icons to match your design system!

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