求定制指定样式下拉选项卡的CSS代码（已有HTML结构）

Hey there! Since you’ve already got your dropdown tab’s HTML structure ready, let’s jump right into building the CSS to get that custom style you’re after. I’ll use a common dropdown HTML setup (adjust it to match your existing code if needed) and pair it with CSS that’s easy to tweak to your exact design.

Example HTML Structure (align with your existing code) #

<div class="dropdown-wrapper">
  <input type="checkbox" id="dropdown-switch" class="dropdown-switch">
  <label for="dropdown-switch" class="dropdown-trigger">
    Choose an Option ▾
  </label>
  <ul class="dropdown-list">
    <li><a href="#" class="dropdown-option">Option 1</a></li>
    <li><a href="#" class="dropdown-option">Option 2</a></li>
    <li><a href="#" class="dropdown-option">Option 3</a></li>
    <li><a href="#" class="dropdown-option">Option 4</a></li>
  </ul>
</div>

Custom CSS Code #

/* Base reset to wipe default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

.dropdown-wrapper {
  position: relative;
  width: 240px;
  margin: 30px;
}

/* Hide the checkbox toggle (we'll use the label to trigger the menu) */
.dropdown-switch {
  display: none;
}

/* Style the dropdown trigger button */
.dropdown-trigger {
  display: block;
  padding: 14px 18px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  color: #495057;
  transition: background-color 0.2s ease;
}

.dropdown-trigger:hover {
  background-color: #e9ecef;
}

/* Dropdown menu base state (hidden by default) */
.dropdown-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
}

/* Show menu when checkbox is checked */
.dropdown-switch:checked ~ .dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Style individual dropdown options */
.dropdown-option {
  display: block;
  padding: 12px 18px;
  text-decoration: none;
  color: #495057;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.dropdown-option:hover {
  background-color: #f8f9fa;
}

Quick Customization Tips #

• Swap out background-color, border-color, and color values to match your brand’s color scheme.
• Adjust padding and font-size to resize the trigger button and menu items.
• Modify the box-shadow value to make the dropdown more subtle or prominent.
• If you’re using a JavaScript-based toggle instead of the checkbox trick, replace the :checked selector logic with a .active class that you toggle via your JS code.

Let me know if you need to tweak this to fit a specific design quirk or HTML structure you’ve built!

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