styling <details>

📘 手冊

• MDN ⟩ <details>

👉 相關

• <details>

• <element-details>

💾 replit

screenshot

codepen

css

/* common settings */
details {
    background: hsl(90, 80%, 70%);
    /* border */
    border: 1px solid #aaa;
    border-radius: 4px;
    margin-bottom: 8px;
}

summary {
    background: hsl(225, 80%, 70%);
    border-radius: 3px;
    font-weight: bold;
    padding: .5em;
}

/* step 1 */
.d1, .d2, .d3, .d4, .d5 {
    padding: .5em;
}

.d2 summary, .d3 summary, .d4 summary, .d5 summary {
    margin: -.5em -.5em 0;
}

.d3, .d4, .d5 {
    padding: .5em .5em 0;
}

.d4[open], .d5[open] {
    padding-bottom: .5em;
    box-shadow: -2px -2px 5px 0px rgba(0, 0, 0, 0.2) inset;
}

.d5[open] summary {
    border-bottom: 1px solid #666;
    margin-bottom: .5em;
    box-shadow: 2px 2px 5px 0px #404040;
}

html

<details class="d0" open>
  <summary>step 0</summary>
  <code>&lt;summary&gt;</code> 藍色、粗體、<code>padding: .5em;</code><br>
  <code>&lt;details&gt;</code> 綠色
</details>

<details class="d1" open>
  <summary>step 1</summary>
  + <code>details { padding: .5em; }</code><br>
  收合時，四周的 <code>padding</code> 都會露出來。
</details>

<details class="d2" open>
  <summary>step 2</summary>
  + <code>summary { margin: -.5em -.5em 0; }</code><br>
  <code>&lt;summary&gt;</code> 上、左右兩側往外擴張，但高度不變。
  收合時，剩下 <code>padding-bottom</code> 都會露出來。
</details>

<details class="d3" open>
  <summary>step 3</summary>
  / <code>details { padding: .5em .5em 0; }</code><br>
  修正 <code>&lt;details&gt;</code> 讓它收合時沒有 <code>padding-bottom</code>。
</details>

<details class="d4" open>
  <summary>step 4</summary>
  + <code>details[open] { padding-bottom: .5em; }</code><br>
  修正 <code>&lt;details&gt;</code> 讓它打開時有 <code>padding-bottom</code>。
</details>

<details class="d5" open>
  <summary>step 5</summary>
  + <code>details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em;}</code><br>
  打開時，讓 <code>&lt;summary&gt;</code> 有底線，並設定 <code>margin-bottom</code> 與下面的內容隔開。
</details>