首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >设置Firefox的HTML5摘要箭头的样式

设置Firefox的HTML5摘要箭头的样式
EN

Stack Overflow用户
提问于 2018-08-14 04:41:52
回答 5查看 7.7K关注 0票数 7

我想在火狐上使用HTML5 summary element。默认情况下,元素的样式为三角形箭头(请参阅示例here)。我想改变这个箭头的颜色。This question解释了如何在Chrome上做到这一点,但经过测试后,它在火狐上不起作用。

有没有办法用Firefox改变摘要元素箭头的颜色?

EN

回答 5

Stack Overflow用户

发布于 2020-02-26 18:10:29

在Firefox和Chrome中删除插入符号:

代码语言:javascript
复制
details summary { list-style-type: none; } /* Firefox */
details summary::-webkit-details-marker { display: none; } /* Chrome */
details summary::marker { display: none; }
代码语言:javascript
复制
<details>
  <summary>Open/Close</summary>
  Lorem ipsum dolor sit.
</details>

票数 13
EN

Stack Overflow用户

发布于 2018-11-02 04:09:28

你可以在火狐(或许是Edge/Safari)中使用list-style-type来设置箭头[css-tricks]的样式。

代码语言:javascript
复制
/* replace with custom image */
summary {
  list-style-image: url(right-arrow.svg);
}

/* hide arrow */
summary {
  list-style-image: none;
}
票数 2
EN

Stack Overflow用户

发布于 2018-12-07 18:15:30

代码语言:javascript
复制
/* Hide default arrow */     
summary::-moz-list-bullet {
   list-style-type: none;
   display: block;
}
/* Create customizable arrow */       
summary:before {
   content: ' ';
   border: solid #939faa;
   border-width: 0 2px 2px 0;
   display: inline-block;
   padding: 0 5px 5px 0;
   transform: rotate(-45deg);
}

http://www.otsukare.info/2016/04/19/summary-details

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51830251

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档