如何用HTML/CSS设置下拉选择框（selectbox）选项横向排列？

Awesome question! Native <select> elements are notoriously tricky to style because browsers lock down most of their dropdown menu behavior. But we can build a CSS-only custom select box that mimics native dropdown functionality and displays options horizontally when opened—no JavaScript required.

Here's a solution built around your original HTML structure (with a tiny, non-intrusive tweak for the toggle):

HTML #

<div class="myselectbox">
  <label for="select-toggle" class="select-trigger">My Selectbox</label>
  <input type="checkbox" id="select-toggle" class="select-toggle">
  <select class="myselect_class" id="myselect_id" size="4">
    <option>OPT1</option>
    <option>OPT2</option>
    <option>OPT3</option>
    <option>OPT4</option>
  </select>
</div>

CSS #

/* Hide the hidden toggle checkbox */
.select-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Style the trigger to look like a native select box */
.select-trigger {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  min-width: 120px;
}

/* Add a dropdown arrow to the trigger */
.select-trigger::after {
  content: "▼";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
}

/* Hide select by default, style it for horizontal options */
.myselect_class {
  display: none;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 0.5rem;
  /* Enable horizontal option layout */
  display: flex;
  overflow-x: auto;
  width: fit-content;
  background: #fff;
  margin: 0;
}

/* Show select when toggle is checked (triggered by clicking the label) */
.select-toggle:checked ~ .myselect_class {
  display: flex;
}

/* Style individual options */
.myselect_class option {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: transparent;
}

.myselect_class option:hover {
  background: #f0f0f0;
}

/* Align trigger and select properly */
.myselectbox {
  position: relative;
  display: inline-block;
}

How This Works: #

• We use a hidden checkbox (toggled via its associated label) to control the visibility of the select element, mimicking the native dropdown open/close action.
• The <select> is set to display: flex to force options into a horizontal row, with overflow-x: auto to add horizontal scrolling if there are more options than fit on screen.
• We style the label to look identical to a native select box, including a dropdown arrow for familiarity.
• Under the hood, we're still using a real <select> element, so form submissions will work exactly like a standard select box.

Quick Notes: #

• This works in all modern browsers and IE11+.
• Add appearance: none; to .myselect_class (plus vendor prefixes if needed for older browsers) to hide the native select's default arrow.
• Adjust padding, colors, and sizing in the CSS to match your project's design system.

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