ใส่ CSS ให้ <details> กับ <summary> #3
Description
details {
border: 1px gray solid;
> summary {
padding: 8px;
cursor: pointer;
list-style: none;
&::-webkit-details-marker {
display: none;
}
> span {
display: flex;
justify-content: space-between;
width: 100%;
&::after {
content: "👇";
}
}
}
> div {
padding: 8px;
border-top: 1px gray solid;
}
&[open] > summary > span::after {
transform: rotate(180deg);
}
}Structure:
<details>
<summary><span>What is Details & Summary?</span></summary>
<div>
The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.
</div>
</details>วิธีลบ ▼ ของเดิมที่มากับ <details>
summary {
list-style: none;
&::-webkit-details-marker {
display: none;
}
}ทำไมต้อง nest <span> ข้างใน <summary>
- Safari (ในเวอร์ชันนี้) ทำ
<summary>เป็นflexไม่ได้ แก้ไขแล้วใน Safari Technology Preview <summary>ใส่ได้แค่ Phrasing content หรือ Heading content เท่านั้น (MDN ของ<summary>)
จาก 2 ข้อข้างบน ทำให้ไม่สามารถจับ <summary> flex โดยตรงได้ และไม่สามารถยัด <div> ลงไปใน <summary> ได้