下载掌阅APP，畅读海量书库
立即打开
浏览器默认的黑色小三角图形略显粗糙，在对视觉要求较高的产品中，往往需要对这个小图标做样式自定义。
以下所有场景均使用同样的HTML结构：
1.颜色的改变
首先，我们可以轻松改变小三角的颜色，例如，下面的CSS代码可以将小三角图标的颜色变为红色。
效果如图3-5所示。
图3-5 <summary>元素小三角颜色自定义的效果
2.位置的改变
其次，我们还可以将小三角图标的位置调整到右侧。
效果如图3-6所示。
图3-6 <summary>元素小三角位置自定义的效果
3.三角字符替换
再者，我们还可以将小三角图标替换为其他字符，甚至是emoji字符，例如：
此时，详情信息展开和收起的效果如图3-7所示。
图3-7 <summary>元素小三角字符替换后的效果
不过需要注意的是，直接使用content替换默认三角字符的做法在Safari 16版本中并不支持，以后可能会支持，因此，如果你有兼容性的要求，可以试试使用下面的完全自定义方法。
4.小三角图标完全自定义
最后，我们还可以将小三角图标完全自定义，方法是隐藏浏览器原生的标记符，再使用::before或::after伪元素模拟，例如：
效果如图3-8所示。
图3-8 <summary>元素小三角完全自定义的效果
以上所有自定义案例均可以通过在浏览器中输入地址https://www.htmlapi.cn/3/1-1.html或扫码访问来体验。