<div class="show">
		<div class="demo">
			<details class="details-1" open="">
				<summary>这是示例1</summary>
				<content>本案例展示对小三角UI重定义:包括显示在右侧,颜色减淡等。</content>
			</details>

			<details class="details-2" open="">
				<summary>这是示例2</summary>
				<content>本案例隐藏原生小三角,使用自定义小三角。</content>
			</details>
		</div>
	</div>
body {
  display: flex;
  justify-content: center;
  padding: 2vw;
}
.show{
  padding-bottom:20px;
  min-width: 50vw;
}
.show h5{
  font-size:13px; 
  line-height:20px; 
  padding:10px 0 2px 2px; 
  margin:0 0 0 8px;
}
.demo{
  padding:10px;
}
details {
  margin: 1rem 0;
}
details:active,
details:focus,
summary:active,
summary:focus{
  outline: none 0;
}

.details-1 summary {
	width: -moz-fit-content;
	width: fit-content;
	direction: rtl;
}
.details-1 ::-webkit-details-marker {
	direction: ltr;
	color: gray;
	margin-left: .5ch;
}
.details-1 ::-moz-list-bullet {
	direction: ltr;
	color: gray;
	margin-left: .5ch;
}

.details-2 {
	background-color: #f5f7f7;
}
.details-2 summary {
	padding: 5px;
	background-color: #f0f0f0;
}
.details-2 content {
	display: block;
	padding: 5px;
}
/* 自定义的三角 */
.details-2 summary::after {
	content: '';
	position: absolute;
	width: 1em; height: 1em;
	margin: .2em 0 0 .5ch;
	background: url(http://www.zhangxinxu.com/study/201801/arrow-on.svg) no-repeat;
	background-size: 100% 100%;
	transition: transform .2s;
  
}
.details-2:not([open]) summary::after {
	margin-top: .25em;
	transform: rotate(90deg);	
}
/* 隐藏默认三角 */
.details-2 ::-webkit-details-marker {
	display: none;
}
.details-2 ::-moz-list-bullet {
	font-size: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.