代码之家 › 专栏 › 技术社区 › albert

如果没有<summary>元素,我可以替换<details>元素的展开图标()吗?

css html

albert · 技术社区 · 2 年前

存在替换的可能性 <details> 元素,这在例如。 Can I replace the expand icon (▶) of the <details> element? 以及答案 https://stackoverflow.com/a/10813665/1657886

通常情况下 <详细信息> 元素将具有 <summary> 一切都很好,但当 <摘要> 元素丢失时,浏览器将返回到默认文本“详细信息”和默认图标。

CSS代码在存在 <摘要> 元素存在:

details>summary {
  list-style-type: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details>summary::before {
    content: "\25ba";
    padding-right:4px;
    font-size: 80%;
}

details[open]>summary::before {
    content: "\25bc";
    padding-right:4px;
    font-size: 80%;
}

问题是如何设置图标,以防 <摘要> 元素丢失?

编辑完整示例(文件名:aa.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<title>My Project</title>
<style>
details>summary {
  list-style-type: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details>summary::before {
    content: "\25ba";
    padding-right:4px;
    font-size: 80%;
}

details[open]>summary::before {
    content: "\25bc";
    padding-right:4px;
    font-size: 80%;
}
</style>
</head>
<body>
  <details >
    <summary> The summary 1</summary> The details 1
  </details>
  <details >
    The details no own summary
  </details>
</body>
</html>

0 回复 | 直到 2 年前

first 2 年前

details {
  position: relative;
}


/* details>summary {
  list-style-type: none;
}

details > summary::-webkit-details-marker {
    display: none;
} */

details::before,
details[open]::before {
  display: inline-block;
  transform: translate(2px, 1px);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  font-weight: 900;
}

details::after,
details[open]::after {
  display: inline-block;
  transform: translate(-3px, -2px);
  position: absolute;
  content: "";
  width: 15px;
  height: 22px;
  background: #fff;
  top: 0;
  left: 0;
}

details::before {
  content: "\002b";
}

details[open]::before {
  content: "\002d";
}

<details>
  <!-- <summary>Click to expand</summary> -->
  With some example text shown when expanded.
</details>

由于一旦删除了 summary 元素(或者至少我找不到),所以解决方案必须有点粗糙。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前