How to style an HTML and element with CSS?

To remove the default arrow and reset the style, you need to use list-style: none to hide the arrow, display: block to avoid inline layout problems, and reset margin and padding; directly set the closed state through details, and set the open state through details: open; add and rotate custom icons using summary::before; ensure box-sizing: border-box to improve click responsiveness.

How to remove the default arrow and reset

appearance

The browser adds a built-in disclosure triangle (arrow) to <summary></summary> , and applies inconsistent default margins, padding, and font styles across browsers. To style it predictably, you need to strip those defaults first.

Use list-style: none to hide the arrow, and display: block to avoid inline-layout quirks. Resetting margin and padding is essential—especially because Safari and Firefox apply different defaults.

 summary {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0.5rem 1rem;
  background-color: #f5f5f5;
  cursor: pointer;
}

How to style the open/closed state of<details></details>

The <details></details> element exposes a :open pseudo-class—but no :closed . So you style the closed state by targeting <details></details> directly, and the open state with <details>:open</details> .

Avoid relying on JavaScript toggles for visual feedback— :open is well-supported in all modern browsers (including Safari 12.1 ). Just remember: the content inside <details></details> (after <summary></summary> ) is only visible when open, so styling that region separately makes sense.

• Apply subtle transitions only to properties like max-height or opacity —but note: max-height transitions require a known max value, not none
• Don't try to animate height: auto ; it won't work
• If you need smooth expand/collapse, use max-height with a safe upper bound (eg, max-height: 500px ) and transition that

 details {
  border: 1px solid #ddd;
  border-radius: 4px;
}

details:open {
  border-color: #007bff;
}

details > *:not(summary) {
  padding: 0.5rem 1rem;
  background-color: #fff;
}

How to add a custom toggle icon (arrow, chevron, etc.)

You can't reliably replace the native arrow using ::marker (it's not widely supported yet), so the safest way is to insert an icon via ::before or ::after on <summary></summary> , then rotate it based on :open .

Use position: relative on <summary></summary> , and absolutely position the icon. Rotate it 90° for closed → right-pointing, and 180° for open → down-pointing (or vice versa).

• Set content: "▶" or use a Unicode character—no external font needed
• Add transition: transform 0.2s ease for smooth rotation
• Remember: <summary></summary> is replaced content, so line-height and vertical-align matter for alignment

 summary {
  position: relative;
  padding-left: 2rem;
}

summary::before {
  content: "▶";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

details[open] > summary::before {
  transform: translateY(-50%) rotate(90deg);
}

Why your

click area might feel unresponsive

Clicking near the edge of <summary></summary> sometimes doesn't trigger the toggle—especially if you've added padding or borders without adjusting box-sizing . That's because the interactive hit area depends on the element's layout box, and some browsers treat the native widget as having a narrow intrinsic tap target.

Make sure box-sizing: border-box is set, and avoid negative margins or overflow: hidden clipping on <summary></summary> . Also: never wrap <summary></summary> in another clickable element (like a <button></button> or

The above is the detailed content of How to style an HTML and element with CSS?. For more information, please follow other related articles on the PHP Chinese website!