如何在 Safari 浏览器上不使用 CSS 而不在 HTML <details> 中显示箭头

Question

我正在Wix、Wordpress等网页构建平台上构建我的主页。但是我的平台不支持导入css个文件... 我在主页上使用了 'details' 标签。但我发现它在 chrome 浏览器上不显示箭头，但在 safari 浏览器上它显示 arraow。我也想在safari上隐藏箭头。

所以我尝试了这段代码。

<details style="list-style:none;">
   <summary style="list-style:none;font-size:14px; cursor:pointer;">Open</summary>
</details>

我输入了 'list-style:none;' 但它仍然不起作用。那么有什么方法可以在不使用 cssfile 的情况下不显示箭头吗？

Answer 1

其实答案很简单，但不直观

在摘要

中使用display: block;

summary {
  display: block;
}

<details>
  <summary>hello world</summary>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quos exercitationem quis delectus. Nisi, porro! Possimus placeat quasi aliquid, aperiam ex, adipisci fugiat similique, minima autem assumenda quod quis officiis!</p>
</details>

如果您的 CMS 不支持导入 .css 文件，您可以使用上面看到的相同方法，使用 style="display: block;"
只有一个 CSS 属性，所以你可以。（这是目前最简单的解决方案）

OR 我现在在网上看到, 那里可以设置这个 伪元素 ::-webkit-details-marker

everything starts with 2colons :: like this ::NameOfPsudoElement is pseudo-element)

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

但我认为您的 CMS 不支持上传外部 .css 文件，因为您不能对 伪元素使用 style="" 方法

但如果您的 cms 支持编写您自己的 HTML，
您可以将上面的 CSS 嵌套在 <style> 标签内

所以我选择第一个答案！

summary {
  display: block;
}

<details>
  <summary>hello world</summary>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quos exercitationem quis delectus. Nisi, porro! Possimus placeat quasi aliquid, aperiam ex, adipisci fugiat similique, minima autem assumenda quod quis officiis!</p>
</details>

Answer 2

你不能在内联样式中定位伪类或伪元素，所以如果你仍然想把它写在HTML文件中，唯一的选择就是这样：

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

如何在 Safari 浏览器上不使用 CSS 而不在 HTML <details> 中显示箭头

how to not display arrow in HTML <details> without using CSS on Safari browser

html

web